第六十一天 动画及阴影

一.拼接网页

　　将区域整体划分起名=>对其他区域布局不产生影响

　　提出公共 =>reset操作

　　当区域发送显示重叠（脱离文档流导致的），需要通过z-index调整层级

　　一定需要最外层，且最外层做自身布局时，不要做过多布局操作。

二.过渡

　　translition属性

　　transition:过渡时间（必须）延迟时间（一般不设）过渡属性（一般采用all默认值）

　　过渡曲线（贝塞尔曲线）（cubic-bezier())

　　过渡属性具体设置给初始状态还是第二状态 根据具体需求

　　

#过渡的持续时间
transition-duration:2s;
#延迟时间
transition-delay:50ms;
#过渡属性
#单一属性 | 属性1，。。。，属性n | all
transition-property:all;
#过渡曲线
# cublic-bezier() | ease | ease-in |ease-out |ease-in-out | linear
transition-timing-function:cublic-bezier(0,2.23,0.99,-1.34);

　　结论：

　　1、尽量悬浮静止的盒子，控制运动的盒子。

　　2、不能确定区间范围的属性值，不会产生动画效果

　　display 不能做动画

三、阴影

#x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜色
box-shadow:0 0 10px 10px black;

#一个盒子可以设置多个阴影，每一套阴影间用逗号隔开
box-shadow:0 -10px 10px -5px black, 0 10px 10px -5px black;

四.伪类实现边框

　　

#自身需要定位
.box{
    position:relative;      
}
#伪类通过定位来完成图层的布局
.box:before{
    content:"";
    #完成布局
    position:absolute;
    top:0;
    #构建图层
    width:1px;
    heigh:100px;
    background-color:black;
}
.box:after{
    content:"";
    position:absolute;
    width:100px;
    height:1px;
    background-color:black;
    top:0；
    left:10px;
}