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

电玩女神 2022-06-08 12:15 425阅读 0赞

h5按钮css3动态特效,让页面静不下来  
在写一些h5页面的时候，难免会需要增加一些动态的效果。今天我来介绍一种，在按钮上添加动态效果的做法。保证让你瞒住，嘻嘻。  
先看看效果图：  
![这里写图片描述][SouthEast]  
由于是动态而且颜色不是很明显，所以可能一下子看不出来，但它确实存在。现在我们通过代码来看看它的存在吧。

<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.用户看到的按钮其实就是一张图片：  
![这里写图片描述][SouthEast 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

[SouthEast]: /images/20220608/8ad160b84b504c9a9db634c10b3c0517.png
[SouthEast 1]: /images/20220608/9dbd50a570ee4733a500f2f833f7c2e6.png