08day动画

动画:

transition:在哪产生动画、动画的时间、运动曲线、延迟

all 所有的属性都可以变

border-radiue 圆角 最大200px

box-shadow: 水平方向 垂直方向 羽化大小 扩展大小 颜色 是否内阴影

opacity 设置透明度

text-align:center 文字居中

变形:

transform:

translate 位移

rotate 360度 沿z轴

scale 缩放

skew 斜切

相互之间不会影响

旋转:

默认沿z轴旋转

在方法后面写沿那个轴旋转

如:rotateX或Y

透视距离

perspective(设置透视距离)800px比较符合人眼的透视效果

需要给盒子加

transform-style:preserve-3; 设置盒子按3d空间显示

bug 该初始值为0度

解决跳变的方法,加一个容器

设置变形的中心点 transform-origin:左 中;

backface-visibility:hidden; 设置盒子背面是否美丽

animation动画

steps 动画步数

你可能感兴趣的:(08day动画)