css3 呼吸的莲花_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”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

运行效果

渐变后效果

实现代码

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 代码

Breathe Button - iinterest

web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权

转载请注明原文链接：HTML5 + CSS3 实现呼吸灯效果