CSS鼠標移入圖標動畫是一種很有趣的效果,當鼠標移到圖標上時,它會產生動畫效果,讓頁面更加生動有趣。
.icon:hover { animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
上面的代碼使用了CSS的動畫效果,當鼠標移入圖標時,會執行rotate
動畫,它會讓圖標無限旋轉。
具體實現方式是通過給圖標添加:hover
偽類,在偽類中設置動畫屬性,然后定義一個@keyframes
規則來描述動畫的過程。
其中,@keyframes
規則中的from
表示動畫開始時的狀態,而to
則表示動畫結束時的狀態。在本例中,我們通過transform: rotate()
屬性來讓圖標旋轉。
通過這種方式,我們可以方便的實現各種鼠標移入圖標動畫效果,讓頁面更加生動有趣。
上一篇css鏈接不能點擊事件
下一篇css鏈入式具體