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動畫
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>呼吸燈</title>
<style type="text/css">
/* css代碼 */
</style>
</head>
<body>
<div class="breath_light" title="呼吸線"></div>
</body>
</html>
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; } /* 動畫結束時的不透明度 */
}
4、學習css3：http://www.w3school.com.cn/css3/css3_animation.asp
5、不錯的css3動畫加載效果：http://www.cnblogs.com/lhb25/archive/2013/12/28/loading-spinners-animated-with-css3.html