动画及阴影

一.拼接网页

将区域整体划分起名 => 对其他区域布局不产生影响提出公共css => ret操作当有区域发送显示重叠(脱离文档流导致的), 需要通过z-index调整层级一定需要最外层,且最外层做自身布局时,不要做过多布局操作

二.过渡

transition属性transition: 过渡时间(必须) 延迟时间(一般不设) 过渡属性(一般采用all默认值) 过渡曲线(贝赛尔曲线)(cubic-bezier())过渡属性具体设置给初始状态还是第二状态 根据具体需求

/*过渡的持续时间*/transition-duration: 2s;/*延迟时间*/transition-delay: 50ms;/*过渡属性*//*单一属性 | 属性1, ..., 属性n | all*/transition-property: all;/*过渡曲线*//*cubic-bezier设问句的作用() | ea | ea-in | ea-out | ea-in-out | linear*/transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);

/*结论:*//*1.尽量悬浮静止的盒子, 控制运动的盒子*//*2.不能确定区间范围的属性值, 不会产生动画效果*//*display 不能做动画  | opacity 可以做动画*/

三.阴影

/*x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜中位数色*/box-shadow: 0 0 10px 10px black;/*一个盒子关于女性健康的文章可以设置多个阴影, 每一套阴影间用逗号隔开*/box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px bla郑州游玩ck;

四.伪类实现边框

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