方法：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中文網其他相關文章！
