在网页特效方面，有时候我们需要用到类似于呼吸灯的效果！那么如何使用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”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
运行效果
渐变后效果
实现代码
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>
： » HTML5 + CSS3 实现呼吸灯效果
原创文章，作者：jamestackk，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251206.html