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

原创 2017年09月25日 14:27:48

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

版权声明:本文为博主原创文章,未经博主允许可以随便转载。

相关文章推荐

H5+css3+js搭建带验证码的登录页面

html登录界面

使用CSS3实现按钮特效

最近在慕课网上看到了一个按钮特效,觉得挺好看的,记录一下。 简单分析一下就是鼠标移入的时候有四条线分别从四个方向移入,横向的两条线宽度和位置发生变化,纵向的两条线高度和位置发生变化。

CSS3 3D按钮特效

  • 2017-05-11 12:39
  • 82KB
  • 下载

58种jQuery模拟CSS3过渡页面切换特效

Animsition是一款使用jQuery来实现CSS3动画的页面切换动画特效插件。该页面切换动画特效插件共有58种效果,按大类别来分可以分为:淡入淡出效果、旋转、翻转和放大缩小效果。另外每种效果都对...

css3 html5动画特效

转载自:http://www.html5tricks.com/8-html5-pure-css3-animation.html 8个超震撼的HTML5和纯CSS3动画源码 15...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)