鼠标未放上效果：

鼠标放上之后旋转效果：

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。