溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“鼠標經(jīng)過旋轉元素的css3代碼怎么寫”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
代碼是“元素:hover{animation:名稱 時間}@keyframes 名稱{100%{transform:rotate(旋轉角度);}}”；hover選擇器設置鼠標經(jīng)過的樣式，animation和@keyframes設置元素動畫。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
:hover在鼠標移到鏈接上時添加的特殊樣式。
:hover 選擇器器可用于所有元素，不僅是鏈接。
可以利用animation屬性來個元素綁定動畫，animation屬性可以控制動畫時長和次數(shù)，語法為：
animation: name duration timing-function delay iteration-count direction;
其中屬性的值設置為“infinite”時，規(guī)定動畫無限次播放，當我們給元素綁定旋轉動畫時就能夠一直旋轉了。
再通過@keyframes規(guī)則設置動畫的旋轉動作。
示例如下：
<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>輸出結果：
“鼠標經(jīng)過旋轉元素的css3代碼怎么寫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
