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

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

20种炫酷CSS3按钮鼠标滑过特效

这是一款集合20组不同CSS3按钮样式和按钮鼠标滑过特效的插件。这20组css3按钮每一组都有3种示例,每一个示例都使用CSS3制作炫酷的鼠标滑过动画。这些按钮适用于各种场合,相信总有一款适合你。 ...
  • souhugirl
  • souhugirl
  • 2015年02月28日 12:55
  • 1080

jquery仿直播app按钮点赞特效

jQuery仿直播app按钮点赞特效 img{ width: 20px; height: 20px; position: absolute; bottom: 100px; left: 50%; ...
  • daimomo000
  • daimomo000
  • 2016年12月23日 17:24
  • 1368

使用CSS3实现按钮特效

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

HTML5 CSS3专题 纯CSS打造相册效果

今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下。 效果图: 效果是不是还是很不错的,最主要的是没有使用一...
  • lmj623565791
  • lmj623565791
  • 2014年06月15日 16:15
  • 19985

HTML5水滴特效

实现canvas铺满全页面,并随窗口的大小变化而变化 /*②如果加上这个样式,会出现竖向滚动条,这是因为canvas和img标签一样有默认的对齐方式,只要把canvas中添加上displa...
  • water_v
  • water_v
  • 2017年10月21日 13:19
  • 363

36种漂亮的CSS3网页按钮Button样式,总有你喜欢的

本页面向大家展开了36种漂亮的网页Button按钮样式,各式各样的都有,适合不同的场合使用。CSS3技术的确非常强大,不过大家测试的时候不要使用IE8,因为IE8还没有完全支持css3,微软如此不屑C...
  • life66881
  • life66881
  • 2015年07月02日 12:37
  • 2395

h5+css3最简单的图片飞入效果

/* Demo Styles */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,table,tbody,p,th,td{ -webk...
  • gsls181711
  • gsls181711
  • 2014年12月09日 13:27
  • 7284

css3 实现 波纹效果

css部分 .outter { animation-name: bubble; animation-duration: 2s; animation-iteration-cou...
  • zhanggongzichu
  • zhanggongzichu
  • 2018年02月07日 09:06
  • 25

CSS3和SVG炫酷鼠标点击按钮效果

这是一组效果非常炫酷的HTML5 SVG和CSS3鼠标点击按钮特效。这组鼠标点击按钮特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果。非常适合于移动手机APP...
  • souhugirl
  • souhugirl
  • 2015年02月13日 12:55
  • 840

H5移动web页面触摸按钮效果实现-模拟按钮hover效果实现

移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下: ...
  • u011388741
  • u011388741
  • 2016年02月14日 16:52
  • 14878
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:h5按钮css3动态特效,让页面静不下来
举报原因:
原因补充:

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