呼吸灯效果html,css之呼吸灯效果

1、首先脑补一个知识点，我们在代码中经常看到-webkit或-moz,那这些有什么作用了，看下代码就知道了：

-webkit-border-radius: 2px;       /*Webkit:谷歌支持：圆角*/

-moz-border-radius: 2px;          /*Mozilla:火狐支持：圆角*/

-ms-border-radius: 2px;           /*Microsoft:IE9支持：圆角*/

-o-border-radius: 2px;            /*Opera支持：圆角*/

border-radius: 2px;               /*圆角*/

2、好了，呼吸灯的原理就是修改标签的不透明度，主要利用到css3的animation动画

html>

呼吸灯

/* css代码 */

3、css代码是这样的：

.breath_light {

width: 50px;                                    /* 宽度 */

height: 4px;                                    /* 高度 */

opacity: 0.1;                                   /* 不透明度 */

overflow: hidden;                               /* 溢出隐藏 */

background: #99dd33;                            /* 背景色 */

margin: 25% auto;                               /* 外边距 */

/* IE10、Firefox and Opera，IE9以及更早的版本不支持 */

animation-name: breath;                         /* 动画名称 */

animation-duration: 3s;                         /* 动画时长3秒 */

animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */

animation-iteration-count: infinite;            /* 播放次数：无限 */

/* Safari and Chrome */

-webkit-animation-name: breath;                 /* 动画名称 */

-webkit-animation-duration: 3s;                 /* 动画时长3秒 */

-webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */

-webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */

}

@keyframes breath {

from { opacity: 0.1; }                          /* 动画开始时的不透明度 */

50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */

to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */

}

@-webkit-keyframes breath {

from { opacity: 0.1; }                          /* 动画开始时的不透明度 */

50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */

to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */

}

原文：http://my.oschina.net/cobish/blog/303796