动画及阴影0. 什么时候该用什么布局 一.拼接网页 将区域整体划分起名 => 对其他区域布局不产生影响 提出公共css => reset操作 当有区域发送显示重叠(脱离文档流导致的), 需要通过z-index调整层级 一定需要最外层,且最外层做自身布局时,不要做过多布局操作二.过渡 (动画) transition属性 transition: 过渡时间(必须) 延迟时间(一般不设) 过渡属性(一般采用all默认值) 过渡曲线(贝赛尔曲线)(cubic-bezier()) 过渡属性具体设置给初始状态还是第二状态 根据具体需求 /*过渡的持续时间*/ transition-duration: 2s; /*延迟时间*/ transition-delay: 50ms; /*过渡属性*/ /*单一属性 | 属性1, ..., 属性n | all*/ transition-property: all; /*过渡曲线*/ /*cubic-bezier() | ease | ease-in | ease-out | ease-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 black;四.伪类实现边框 /*自身需要定位*/ .box { position: relative; } /*伪类通过定位来完成图层的布局*/ .box:before { content: ""; /*完成布局*/ position: absolute; top: 10px; left: 0; /*构建图层*/ width: 1px; height: 100px; } .box:after { content: ""; position: absolute; width: 100px; height: 1px; top: 0; left: 10px; }
python-docx表格设置阴影_Python-ccs动画及阴影
最新推荐文章于 2021-03-18 23:30:42 发布