主要使用的css屬性
屬性：animation
使用語法如下：
animation: name duration timing-function delay iteration-count direction;
name：規定需要綁定到選擇器的 keyframe 名稱。（此項爲自定義）
duration：規定完成動畫所花費的時間，以秒或毫秒計。
timing-function：規定動畫的速度曲線
timing-function的值有
delay：規定在動畫開始之前的延遲。（動畫在規定的延遲時間後開始）
iteration-count：規定動畫應該播放的次數。（動畫循環播放的次數）
direction：規定是否應該輪流反向播放動畫。
屬性：opacity （表示元素的透明度 值在0 到1之間）
屬性：border-radius（通過設置此值來變化元素的角爲圓角）
屬性：box-shadow (元素周圍的陰影)
使用語法：box-shadow: 水平位移 垂直位移 模糊半徑 顏色
示例：
-moz-box-shadow:0px 0px 20px #00c1de;
-webkit-box-shadow:0px 0px 20px #00c1de;
box-shadow:0px 0px 20px #00c1de;
border-radius: 10px;
演示代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>呼吸燈示例</title>
<style type="text/css">
.light-background{
width: 400px;
height: 200px;
margin: auto;
background-color: black;
position: relative;
}
.breath-light{
width: 100px;
height: 14px;
position: absolute;
top: 90px;
left: 130px;
background-color: #00c1de;
opacity: 0.3;
-moz-box-shadow:0px 0px 20px #00c1de;
-webkit-box-shadow:0px 0px 20px #00c1de;
box-shadow:0px 0px 20px #00c1de;
border-radius: 10px;
}
.star-breath{
opacity: 0.1;
animation:breath 3s ease-in-out infinite;/* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
-webkit-animation:breath 3s ease-in-out infinite; /*Safari and Chrome*/
}
@keyframes breath {
from { opacity: 0.3; } /* 動畫開始時的不透明度 */
50% { opacity: 1; } /* 動畫50% 時的不透明度 */
to { opacity: 0.3; } /* 動畫結束時的不透明度 */
}
@-webkit-keyframes breath {
from { opacity: 0.3; } /* 動畫開始時的不透明度 */
50% { opacity: 1; } /* 動畫50% 時的不透明度 */
to { opacity: 0.3; } /* 動畫結束時的不透明度 */
}
</style>
</head>
<body>
<div class="light-background">
<div class="breath-light star-breath">
</div>
</div>
</body>
</html>