滑鼠未放上效果：
滑鼠放上之後旋轉效果：
transition: all 2.0s;表示所有的屬性變換在2秒內完成；
transform: rotate(360deg);表示圖片旋轉360度。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> img{ border: #000 solid 2px; display: block; margin: 50px auto; border-radius: 50%; transition: all 2.0s; } img:hover{ transform: rotate(360deg); } </style> </head> <body> <img src="img/03.jpg" /> </body></html>
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
Bootstrap實現價格表
css做出波紋動畫
CSS怎麼處理瀏覽器的預設樣式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
