色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

Css鼠標移入圖標動畫

錢浩然2年前10瀏覽0評論

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()屬性來讓圖標旋轉。

通過這種方式,我們可以方便的實現各種鼠標移入圖標動畫效果,讓頁面更加生動有趣。