CSS中心旋轉360度是一種常見的動畫效果,可以為網站增添視覺效果與趣味性。下面介紹如何使用CSS來實現這一效果。
.rotate { width: 100px; height: 100px; margin: 0 auto; transform: rotate(0deg); transition: all 0.5s ease; } .rotate:hover { transform: rotate(360deg); }
首先,需要定義一個帶有旋轉效果的樣式類,名稱為"rotate"。通過設置寬高為100px,并設置margin為0 auto,使其居中顯示。接著,通過transform屬性來設置旋轉角度,初始值為0deg。同時,為了使旋轉效果更柔和,設置了過渡效果,過渡時間為0.5s,過渡方式為ease。
在:hover偽類中,將旋轉角度設置為360deg,當鼠標懸停在該元素上時即啟動旋轉動畫。
通過添加這一簡單的CSS樣式類,我們就能為網站添加一個美觀的動畫效果。同時,CSS還提供了一系列其他有趣的動畫效果,需要的同學可以進一步深入學習。
上一篇css中心擴散效果