4.花瓣特效----js+旋转+位移+随机颜色+随机位置

在3.花瓣特效----js+旋转+位移的基础上再增加位置和颜色的变化。

1.思路：

1. 利用Math.random来产生（0,16）的随机数，然后创建从1到F的数组New_color，New_color[num]即为随机的一位颜色，需要产生随机的颜色。
2. 产生随机位置，需要知道浏览器视口的宽高，根据其宽高来生成对应范围的随机数，还需要记录之前位置，然后根据之前的位置移动到新产生的位置。
3. 将随机产生的left和top赋值给外部容器的@keyframes，注意需要先清除之前的动画帧@keyframes，如下图所示：
   

2.问题：

在动画颜色切换的时候会出现突然闪烁的效果，原因是当低亮度的颜色跳到高亮度的颜色时，偏差过大，所以需要对颜色进行过渡处理，0%–10%，让其从opacity：0到opacity：1，90%–100%让其从opacity：1到opacity：0；代码如下所示：

keyframeList.insertRule("@keyframes one-"+i+" {" +
      "      0%{" +
      "        box-shadow: inset 0rem 0rem 0rem 0.1rem #E63FEA, 0rem 0rem 1.5rem 0rem #E63FEA;\n" +
      "        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +
      "        opacity: 0 ;"+
      "      }" +
      "      10%{" +
      "        box-shadow: inset 0rem 0rem 0rem 0.1rem #E63FEA, 0rem 0rem 1.5rem 0rem #E63FEA;\n" +
      "        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +
      "        animation-timing-function: ease-out;"+
      "        opacity: 1 ;"+
      "      }" +
      "      50%{" +
      "        box-shadow: inset 0rem 0rem 0rem 0.1rem #17E1E6, 0rem 0rem 1.5rem 0rem #17E1E6;\n" +
      "        transform: rotate("+(i*45)+"deg) translate(0px,100px);" +
      "        animation-timing-function: ease-in;"+
      "        opacity: 1 ;"+
      "      }" +
      "      90%{" +
      "        box-shadow: inset 0rem 0rem 0rem 0.1rem #E63FEA, 0rem 0rem 1.5rem 0rem #E63FEA;\n" +
      "        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +
      "        animation-timing-function: ease-out;"+
      "        opacity: 1 ;"+
      "      }" +
      "      100%{" +
      "        box-shadow: inset 0rem 0rem 0rem 0.1rem #E63FEA, 0rem 0rem 1.5rem 0rem #E63FEA;\n" +
      "        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +
      "        opacity: 0 ;"+
      "      }" +
      "    }")

3.具体的代码&#