HTML5 + CSS3 实现呼吸灯效果

在网页特效方面,有时候我们需要用到类似于呼吸灯的效果!那么如何使用HTML5 配合 CSS3 实现呢?本文将详细的讲解如何实现这样的效果。

用到的知识点

  • border-radius:该属性是一个简写属性,用于设置四个 border-*-radius 属性。 提示:该属性允许您为元素添加圆角边框!
  • gradient:CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。为了兼容性,我们分别使用-moz-linear-gradient、-webkit-gradient、-webkit-linear-gradient、-o-linear-gradient。
  • animation:该属性是一个简写属性,用于设置六个动画属性:animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction。
  • @keyframes:该属性被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。

运行效果

HTML5 + CSS3 实现呼吸灯效果

渐变后效果

HTML5 + CSS3 实现呼吸灯效果

实现代码

css3 代码如下:

 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,menu{ 
 margin:0; padding:0;} 
 body{ 
 font-size:12px; 
 -webkit-text-size-adjust:none; 
 font-family:Arial, Helvetica, sans-serif;} 
 img{ border:none;} 
 ol,ul{ list-style:none;} 
 em{ font-style:normal;} 
 a{ text-decoration:none;} 
 .clearfix{ #zoom:1;} 
 .clearfix:after{ content:' '; display:block; height:0; clear:both; color:#fff;} 
 body{ background:#333;} 
 .breathe-btn{ position:relative; width:100px; height:10px; margin:40px auto; 
 line-height:40px;  
 border:1px solid #2b92d4; 
 border-radius:5px; 
 color:#fff; 
 font-size:20px; 
 text-align:center;  
 cursor:pointer; 
 box-shadow:0 1px 2px rgba(0,0,0,.3); 
 overflow:hidden;  
 background-image: -webkit-gradient(linear, left top, left bottom, from(#6cc3fe), to(#21a1d0));     
 -webkit-animation-timing-function: ease-in-out;     
 -webkit-animation-name: breathe;     
 -webkit-animation-duration: 2700ms;     
 -webkit-animation-iteration-count: infinite;     
 -webkit-animation-direction: alternate; } 
 @-webkit-keyframes breathe {     0% { 
 opacity: .2; 
 box-shadow:0 1px 2px rgba(255,255,255,0.1);}     
 100% { opacity: 1; border:1px solid rgba(59,235,235,1); 
 box-shadow:0 1px 30px rgba(59,255,255,1);} }

html5 代码

 <!DOCTYPE HTML> 
 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <title>Breathe Button - iinterest</title> </head> 
 <body> 
 <div class="breathe-btn"></div> 
 </body> 
 </html>
1
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到