动画和变形
动画和变形
盒子动画
简单动画
渐变时间函数:transition-timing-function CSS属性以何种速度进行渐变
贝塞尔曲线:cubic-bezier
贝塞尔曲线是由四个参考点绘制而成的曲线
在CSS中,第一个点和第四个点已固定,用户可以设置第二和第三个点曲线的纵坐标表示渐变轨迹,横坐标表示时间 示例:transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)
贝塞尔曲线的预设值
Ease 渐快,匀速,减慢
ease-in 渐快,匀速
ease-out 匀速,减慢
ease-in-out 和ease类似,但比ease的加速度大(幅度大)
Linear 全程匀速
复杂动画
涉及到的属性
animation-name:动画名称
animation-duration:单次动画总时长
animation-timing-function:时间函数
animation-delay:播放前延时的时长
animation-iteration-count:播放次数 特殊值:infinite
animation-direction:播放顺序 normal:正常播放 alternate:轮流反向播放
animation库:https://www.dowebork
盒子变形
什么是变形
通过变形可以改变盒子的视觉效果
变形不会改变盒子原本的位置和尺寸,因此不会对其他元素造成影响
变形详解
变形的种类
Transition 过渡
旋转(rotate)
缩放(scale)
移动(translate)
倾斜(skew)
其他属性
透视距离:perspective 该属性设置到变形元素的父元素上
背面可见性:backface-visibility visible:默认值,背面可见 hidden:背面不可见