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