今天繼續開始新的學習，開頭還是寫個漂亮的網頁樣式，讓自己有個漂亮的預覽效果。今天研究了一下CSS動畫。下面放一段CSS動畫的代碼。
需求是這樣的：讓一個代碼塊實現文字顔色漸變，放大縮小，位置移動，滾來滾去。
步驟過於簡單，這裏就不描述了。代碼如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JSNote3</title> 6 <style> 7 .anip{ 8 color: red; 9 font-weight: bold; 10 width: 80px; 11 height: 80px; 12 background: black; 13 border-radius: 50%; 14 animation: pani1 2s linear 1s infinite alternate; 15 } 16 @keyframes pani1{ 17 0%{transform: scale(1.2,1.5);position: relative; left: 20%;top: 0;} 18 100%{transform: scale(0.8,0.9) rotate(360deg); position: relative; left: 80%;top: 0;} 19 from{color: yellow;} 20 to{color: red;} 21 } 22 </style> 23 </head> 24 <body> 25 <p class="anip"><br>蠟筆小新</p> 26 </body> 27 </html>
這裏用來實現動畫效果的代碼塊p也可以替換成其他代碼塊，可以是圖片等等。