站長資訊網(wǎng)
代碼是“元素:hover{animation:名稱 時(shí)間}@keyframes 名稱{100%{transform:rotate(旋轉(zhuǎn)角度);}}”；hover選擇器設(shè)置鼠標(biāo)經(jīng)過的樣式，animation和@keyframes設(shè)置元素動(dòng)畫。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
鼠標(biāo)經(jīng)過旋轉(zhuǎn)元素的css3代碼是什么
:hover在鼠標(biāo)移到鏈接上時(shí)添加的特殊樣式。
:hover 選擇器器可用于所有元素，不僅是鏈接。
可以利用animation屬性來個(gè)元素綁定動(dòng)畫，animation屬性可以控制動(dòng)畫時(shí)長和次數(shù)，語法為：
animation: name duration timing-function delay iteration-count direction;
其中屬性的值設(shè)置為“infinite”時(shí)，規(guī)定動(dòng)畫無限次播放，當(dāng)我們給元素綁定旋轉(zhuǎn)動(dòng)畫時(shí)就能夠一直旋轉(zhuǎn)了。
再通過@keyframes規(guī)則設(shè)置動(dòng)畫的旋轉(zhuǎn)動(dòng)作。
示例如下：
<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>
輸出結(jié)果：
（學(xué)習(xí)視頻分享：css視頻教程）
