抢口罩H5活动项目总结

1、animation：动画名称，动画持续时间，动画模式，动画延迟时间，动画次数，是否轮流反向播动画

2、img  图片自适应场宽 <img src=""  alt srcset/>

3、transform-origin 在未使用 transform-origin时rotate等是绕自身的中心位置为原点

4、口罩内容是一个圆带有边框 通过添加伪类元素在外层画一个圆，关于位置 ：首先做绝对定位，top left设置50% ，设置长宽， transform（-50%，-50%）

5、如果一个节点绑定两个class 可以使用&  

     例如：class="mask maskleft"  

               .mask{

                  &.maskleft{}

                }

6、transition：允许css属性在一定时间内平滑过渡

                       过度属性的名称  过渡效果持续时间  速度曲线  过渡效果延迟时间

     translate：transform的一个方法

                      从X轴Y轴移动

     transform：translate（X,Y）rotate

7、绑定延迟时间

     :style="{ transitionDelay: '3s' }"

8、动画驶入：1）绑定class为空 2）、绑定class，animation的class。

      

      <div class="subway" :class="subwaychange"></div>

     初始 subwaychange=“” 此时小车未入场

     开始入场：subwaychange=“subwayenter ”

     .subwayenter {

      animation: train_run 0.5s linear forwards;

    }

9、Date.now()获取当前时间，

     获取当前时间戳：new Date().getTime()可以得到得到1970年01月1日0点零分以来的毫秒数， 或者Date.parse(new Date());