h5按钮css3动态特效,让页面静不下来

h5按钮css3动态特效,让页面静不下来
在写一些h5页面的时候，难免会需要增加一些动态的效果。今天我来介绍一种，在按钮上添加动态效果的做法。保证让你瞒住，嘻嘻。
先看看效果图：

由于是动态而且颜色不是很明显，所以可能一下子看不出来，但它确实存在。现在我们通过代码来看看它的存在吧。

<img src="images/btn_play.png" id='btn-play'/>
<div id="kuang-begin"></div>

 @keyframes toLeft{
    from{left: 0;}
    80%{left: 98%;}
    to{left: 98%;}
 }
 #btn-play{
      width:366px;
      height: 107px; 
  }
  #kuang-begin{
      width:366px;
      height:107px; 
      overflow: hidden;
      pointer-events: none;  
  }
  #kuang-begin:&:before {
          content: '';
          display: block;
          position: absolute;
          width:50px;
          height: 100%;
          top: 0;
          background: -webkit-linear-gradient(left, rgba(250,250,250,0)0, rgba(250,250,250,.2)50%, rgba(250,250,250,0)100%);
          transform: skewX(-50deg);
          animation: toLeft 2s ease infinite;
      }

因为是从项目中拿出来的，所以样式多少有点问题，那么我来说说重要的思路吧。
1.用户看到的按钮其实就是一张图片：

2.下面的kuang-begin才是，用来增加动态的。
3.就是通过css将kuang-begin盖在那张按钮图片上
a.控制div的颜色：background: -webkit-linear-gradient(left, rgba(250,250,250,0)0, rgba(250,250,250,.2)50%, rgba(250,250,250,0)100%);
b.控制div的形状：transform: skewX(-50deg);
c.控制div的动态：@keyframes toLeft{from{left: 0;}80%{left: 98%;} to{left: 98%;}} animation: toLeft 2s ease infinite;

然后就能实现了，试试看，你也行。666