CSS3動畫可以制作出很酷的效果,比如實現元素的快速旋轉。
.rotate { animation-name: spin; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
上面的代碼使用了CSS3動畫的關鍵幀(@keyframes)和動畫屬性(animation),實現了一個無限循環的快速旋轉效果。
通過給元素加上.rotate類名,就可以讓它自動旋轉起來。
動畫的具體效果可以通過設置不同的屬性值來調整,比如duration控制動畫的時長,timing-function控制動畫的速度曲線,iteration-count控制動畫的循環次數。
值得注意的是,CSS3動畫只對支持的瀏覽器生效,老的瀏覽器如IE9及以下不支持,可以考慮使用JavaScript動畫庫來實現類似的效果。
總之,CSS3動畫是網頁制作中的一項強大工具,熟練掌握它可以讓你的頁面更加生動有趣。