形变和动画

Posted 2021-01-27 yanhui1995

一. 形变
# 1.形变参考点：三轴交界点
# transfrom-origin：x轴 y轴坐标
# 2.旋转 rotate deg
# transfrom：rotate（720deg）；
# 3.偏移 translate px
# translateX(200px) translateY(200px)
# 4.缩放 scale 无单位
# transfrom：scale（X轴比例，Y轴比例）
# 注：可以多形变，空格隔开书写在一条transfrom属性中，顺序一般会影响形变结果
# 形变不改变盒子布局，只拿形变做动画

# 二. 动画
# 实现动画：
# 1.设置动画体
# @keyframes 动画名 {
#        多种状态的动画体
#     }
# 举例：
# @keyframes hehe {
#        /*起点可以省略,采用的是起始状态*/
#        0%{}
#        33.3%{
#           margin-left: 800px;
#           margin-top: 50px;
#        }
#        66.6%{
#           margin-left: 500px;
#           /*在每一个动画节点都需要明确所有做动画属性在该节点的属性值*/
#           margin-top: 300px;
#        }
#        /*终点需要设置*/
#        100%{margin-top: 50px;
#           margin-left: 200px;}
#     }
#
# 2.设置动画属性
#     .box {
#        /*animation:动画名 时间 运动次数(无限次infinite) 运动曲线*/
#        animation: hehe 2s infinite linear
#     }