在CSS3中,有一個強大的特性:動畫。CSS3動畫可以為我們的頁面添加很多生動活潑的效果,使得網頁更加有吸引力。其中,旋轉動畫是CSS3中比較常見的一種動畫效果。
/* 給一個div添加旋轉動畫 */ div { width: 100px; height: 100px; background-color: #f00; /* 指定動畫屬性 */ animation: rotate 2s infinite linear; /* 指定動畫名稱 */ animation-name: rotate; } /* 指定一個名為“rotate”的動畫 */ @keyframes rotate { /* 指定動畫的0%和100%狀態 */ 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
上述代碼中,我們給一個div添加了旋轉動畫,每2秒鐘旋轉一圈,并且無限循環,直到頁面被關閉。該動畫由兩個部分組成:動畫屬性和動畫名稱。動畫屬性是指動畫的一些基本屬性,如執行時間、循環次數、動畫運動方式等。而動畫名稱是指動畫的名稱,用于在@keyframes中定義動畫的效果。
通過上述代碼,我們可以實現一個簡單的旋轉動畫。當然,CSS3動畫功能還有很多其他的效果,如縮放、移動等。我們只需要通過學習更多的動畫屬性和動畫名稱,就可以創造出更加豐富、多樣的動畫效果。