黑马程序员技术交流社区

标题: 转化动画知识点 [打印本页]

---

作者: 西柚甜沫沫    时间: 2019-4-9 14:25
标题: 转化动画知识点
一、2D转换：transform
1）移动：translate（x,y)类似定位，px，%记得把移动放其他属性前面
2）旋转：rotate（deg)
3）缩放：scale（x,y）倍数，1/2/3...0.5缩小
伪元素写结构时必须加content:””;
1》转换中心点：transform-origin:x y;（可以%，可以方位名词）

二、动画：animation
        1）先定义动画
                @keyframes+动画名字{0%-100%}
2）调用动画
Animation:name 时间；+其他
运动曲线：linear匀速
步长：steps()
循环播放：infinite
逆播放：alternate
动画暂停：animation-play-state:paused;
结束后:回到起始状态backwards/保持不动forwards;
三、3D转换
1）移动：translateX/Y/Z/3d(x,y.z)一般用px;
2）透视：perspective：px;写在被观察元素的父盒子上。
3）旋转：rotateX/Y/Z(deg)
4）3d呈现：transfrom-style写给父盒子，影响子盒子

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2