首先，先介紹一下主要用到的css屬性：animation，text-shadow。
text-shadow就不再介紹了，上一篇已經詳細介紹了用法。這里先介紹一下animation屬性。
1.animation
animation是css3的屬性，主要有以下幾項：
| 屬性 | 描述 | |
|---|---|---|
| @keyframes | 規定動畫。 | |
| animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | |
| animation-name | 規定 @keyframes 動畫的名稱。 | |
| animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 | |
| animation-timing-function | 規定動畫的速度曲線。默認是 "ease"。 | |
| animation-delay | 規定動畫何時開始。默認是 0。 | |
| animation-iteration-count | 規定動畫被播放的次數。默認是 1。 | |
| animation-direction | 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 | |
| animation-play-state | 規定動畫是否正在運行或暫停。默認是 "running"。 | |
| animation-fill-mode | 規定對象動畫時間之外的狀態。 |
指定動畫和播放的速度時間等相關設置。
2.keyframes
關鍵幀是css動畫的另一個重要屬性。要設置動畫必須指定要關鍵幀。
用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。0% 是動畫的開始，100% 是動畫的完成，我們也可以設置好0-100中間的各個時間階段的樣式。比如這里，我們指定了首尾兩個節點的樣式：
1 @keyframes ani1 { 2 from { 3 text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff, 0 0 40px #ff1177, 0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 150px #ff1177; 4 } 5 to { 6 text-shadow: 0 0 5px #fff,0 0 15px #fff,0 0 20px #fff, 0 0 30px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 60px #ff1177; 7 } 8 }
其原理，就是利用text-shadow的漸變過渡結合動畫，來實現呼吸燈的亮暗效果。
我們可以設置更准確的百分比樣式，如：
1 @keyframes myfirst 2 { 3 0% {background: red;} 4 25% {background: yellow;} 5 50% {background: blue;} 6 100% {background: green;} 7 }
3.結合使用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <style type="text/css"> 6 body { 7 font-weight: 400; 8 background-color: black; 9 text-align: center; 10 } 11 a { 12 font-size: 7em; 13 text-decoration: none; 14 } 15 p:nth-child(1) a { 16 color: #FF1177; 17 } 18 p:nth-child(1) a:hover { 19 color: white; 20 animation: ani1 1s ease-in-out infinite alternate; 21 -webkit-animation: ani1 1s ease-in-out infinite alternate; 22 -moz-animation: ani1 1s ease-in-out infinite alternate; 23 } 24 @keyframes ani1 { 25 from { 26 text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff, 0 0 40px #ff1177, 0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 150px #ff1177; 27 } 28 to { 29 text-shadow: 0 0 5px #fff,0 0 15px #fff,0 0 20px #fff, 0 0 30px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 60px #ff1177; 30 } 31 } 32 @-webkit-keyframes ani1 { 33 from { 34 text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff, 0 0 40px #ff1177, 0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 150px #ff1177; 35 } 36 to { 37 text-shadow: 0 0 5px #fff,0 0 15px #fff,0 0 20px #fff, 0 0 30px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 60px #ff1177; 38 } 39 } 40 @-moz-keyframes ani1 { 41 from { 42 text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff, 0 0 40px #ff1177, 0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 150px #ff1177; 43 } 44 to { 45 text-shadow: 0 0 5px #fff,0 0 15px #fff,0 0 20px #fff, 0 0 30px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 60px #ff1177; 46 } 47 } 48 </style> 49 </head> 50 <body> 51 <div id="container"> 52 <p><a href="#"> 53 RED 54 </a></p> 55 </div> 56 </body> 57 </html>
需要注意的是，由於存在瀏覽器兼容性，IE9以上和谷歌火狐等才支持。因而寫樣式的時候，keyframes和animation需要使用谷歌和火狐的前綴來進行兼容：-webkit-,-moz-