滑鼠經過旋轉元素的css3程式碼是什麼
- WBOY原創
- 2022-03-22 12:17:291953瀏覽
程式碼是「元素:hover{animation:名稱時間}@keyframes 名稱{100%{transform:rotate(旋轉角度);}}」；hover選擇器設定滑鼠經過的樣式，animation和@keyframes設定元素動畫。
本教學操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。
滑鼠經過旋轉元素的css3程式碼是什麼
:hover在滑鼠移到連結上時新增的特殊樣式。
:hover 選擇器器可用於所有元素，不僅是連結。
可以利用animation屬性來個元素綁定動畫，animation屬性可以控制動畫長度和次數，語法為：
animation: name duration timing-function delay iteration-count direction;
其中屬性的值設定為「infinite」時，規定動畫無限次播放，當我們給元素綁定旋轉動畫時就能夠一直旋轉了。
再透過@keyframes規則設定動畫的旋轉動作。
範例如下：
<html>
<head>
<style>
div{
width:100px;
height:100px;
background-color:pink;
}
div:hover{animation:fadenum 5s;}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>輸出結果：
#（學習影片分享：css影片教學）
以上是滑鼠經過旋轉元素的css3程式碼是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css3怎麼達到圓形轉動的效果下一篇：css3怎麼達到圓形轉動的效果