前端(七)之动画与阴影
程序员文章站
2022-04-05 11:27:35
动画及阴影 一.拼接网页 二.过渡 三.阴影 四.伪类实现边框 ......
动画及阴影
一.拼接网页
将区域整体划分起名 => 对其他区域布局不产生影响 提出公共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; background-color: black; } .box:after { content: ""; position: absolute; width: 100px; height: 1px; background-color: black; top: 0; left: 10px; }
下一篇: Python数值类型
推荐阅读
-
react与redux通信之hook-前端江湖-SegmentFault思否
-
WebGL three.js学习笔记之阴影与实现物体的动画效果
-
Vuejs第七篇之Vuejs过渡动画案例全面解析
-
前端笔记知识点整合之jQuery(一)加载函数的区别&对象&操作HTML/CSS&动画&选择器
-
前端(七)之动画与阴影
-
突袭HTML5之Canvas 2D入门5-事件与动画
-
js前端面试之同步与异步问题详解
-
百度前端学院-基础学院-第20到21天之setTimeOut与setInterval
-
Vue学习之动画钩子,Vuex的使用与购物车的展示实例
-
前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密