世界知最

没有过时的技术,只有过时的人

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

阅读更多
个人分类: css3
想对作者说点什么? 我来说一句

36种漂亮的网页Button按钮样式

2013年06月09日 47KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭