50projects50days知识点-34-animated-countdown

示例网址：

https://50projects50days.com/projects/animated-countdown/
http://50projects.tc.cluski.top/50projects50days/animated-countdown/

效果：

思路：

1. 旋转的数字通过animation来实现。将3、2、1、0这几个<span>标签重叠放在一起，每个间隔1s启动动画。动画中通过如下的keyframes来实现：

   .nums span {
       transform-origin: bottom center;
       animation: countDown 1s ease-in-out forwards;
       transform: translate(50%, 50%) rotate(90deg);
   }
   
   @keyframes countDown {
       0% {
           transform: translate(50%, 50%) rotate(90deg);
       }
       30% {
           transform: translate(0, 0) rotate(-20deg);
       }
       40% {
           transform: translate(0, 0) rotate(10deg);
       }
       50% {
           transform: translate(0, 0) rotate(0deg);
       }
       60% {
           transform: translate(0, 0) rotate(0deg);
       }
       70% {
           transform: translate(0, 0) rotate(10deg);
       }
       100% {
           transform: translate(-50%, 50%) rotate(-90deg);
       }
   }
   

   上述的CSS中还指定了transform-origin: bottom center，这样才可以有基于底部旋转的效果。

2. 倒计时完毕之后，同样也是通过animation效果来实现了GO标签的从小变大的效果：

   .final {
       animation: showFinal 0.5s ease-out;
       
       /*屏幕居中*/
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }
   
   @keyframes showFinal {
       0% {
           transform: translate(-50%, -50%) scale(0);
       }
       100% {
           transform: translate(-50%, -50%) scale(1);
       }
   }