• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

HTML5 + CSS3 实现呼吸灯效果

JAVA web前端中文站 3年前 (2017-04-26) 3982次浏览 已收录 0个评论

在网页特效方面,有时候我们需要用到类似于呼吸灯的效果!那么如何使用 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>

web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML5 + CSS3 实现呼吸灯效果
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址