方法:1、用「@keyframes 動畫名稱{100% {transform:rotate(角度)}」建立旋轉動畫;2、用「元素:hover{animation:動畫名稱時間linear infinite}」設置在滑鼠移上元素時觸發動畫。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
css實作滑鼠移上去旋轉效果
#旋轉效果可以利用animation屬性和「@keyframes」規則創建動畫實現。
而滑鼠移上元素,觸發旋轉動畫需要使用:hover
#選擇器。 (:hover 選擇器用於選擇滑鼠指標浮動在上面的元素,並設定樣式。)
#實作程式碼:
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; margin: 50px auto; } div:hover { animation: mymove 1s linear infinite; } @keyframes mymove { 100% { transform: rotate(360deg); } } @-webkit-keyframes mymove {/* Safari and Chrome */ 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="box"></div> </body> </html>
(學習影片分享:css影片教學)
以上是css怎麼實現滑鼠移上去旋轉效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!