在網頁設計中,CSS動畫成為了不可缺少的元素之一。其中,不停轉動的動畫效果給人們帶來了耳目一新的感覺,同時也為頁面增添了生氣和活力。本文將介紹如何使用CSS實現不停轉動的動畫效果。
.spinner{ width: 50px; height: 50px; border-radius: 50%; border: 5px solid #ccc; border-top-color: #f79256; animation: spin 1s linear infinite; } @keyframes spin{ 0% {transform: rotate(0);} 100% {transform: rotate(360deg);} }
以上代碼是實現不停轉動的動畫效果的關鍵代碼。首先,在HTML中定義一個類名為“spinner”的元素,然后在CSS中設置該元素的寬度、高度、圓角、邊框等屬性。接著,通過定義動畫名稱“spin”并設置其執行時間、動畫速度及執行次數,我們就可以實現動畫的連續轉動。具體來說,CSS中的“@keyframes”規則可以定義一個動畫的多個關鍵幀,在本例中,我們將圖片從0度旋轉到360度。
最后,引入以上代碼的效果類似下面的圖片。不停轉動的動畫效果令頁面更具動態感,也吸引了用戶的注意力。