CSS動畫實踐-优快云博客

本文介紹了一個具體的CSS動畫示例，演示如何實現元素的文字顔色漸變、放大縮小及位置移動等效果。通過對CSS動畫屬性的應用，使網頁元素呈現出豐富的視覺效果。

　　今天繼續開始新的學習，開頭還是寫個漂亮的網頁樣式，讓自己有個漂亮的預覽效果。今天研究了一下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>