我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

js实现酷炫倒计时动画效果

一、效果展示

二、码上掘金展示

三、部分代码解析

3.设计思路

其中讲数字进行倒计时处理，使用随机数Math.floor(Math.random()*5); ，将相关的颜色赋值给当前的数字的样式h1.style.color = COLORS[num]; ，这样就直接将其赋予其中，最后结束时clearInterval(timer);将倒计时停止。

2.样式展示

<style>
      *{margin:0;padding:0;}
      body{width:100%;height:100%;overflow:hidden;}
      .box{width:1000px;height:700px;margin:100px auto;}
      .btn{width:100px;height:100px;margin:50px auto 0;font-size:16px;color:#fff;text-align:center;line-height:100px;border-radius:100px;background:#3385ff;}
      .btn:hover{box-shadow: 0 0 10px #77aeff;cursor:pointer;}
      h1{font-size:300px;color:red;text-align:center;}
      h1.active{animation:count .5s;}
      @keyframes count {
        from {
          transform: scale(.1);
          opacity: 1;
        }
        to {
          transform: scale(3.5);
          opacity: 0;
          display:none;
        }
      }
    </style>

3.keyframes的解释说明

css3中keyframes的用法是什么

此属性与animation属性是密切相关的。

keyframes翻译成中文，是"关键帧"的意思，如果用过flash应该对这个比较好理解，当然不会flash也没有任何问题。

使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。

语法结构:

@keyframes animationname {keyframes-selector {css-styles;}}

参数解析:

animationname:声明动画的名称。

keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。"from" 和 "to"的形式等价于 0% 和 100%。建议始终使用百分比形式。