html点击头像旋转,如何鼠标移动上去让头像旋转

我们在做个人介绍的时候，基本上都会加上头像，那么如何让用户指这头像能让头像旋转呢？下面我就交大家方法。

1、头像居中放置。

img{

border: #000 solid 2px;

display: block;

margin: 50px auto;

border-radius: 50%;

}

2、使用hover动作来img:hover设置transform: rotate(360deg)。

img:hover{

transform: rotate(360deg);

}

3、再在img标签里面加入transition: all 2.0s; ，

1

img{

border: #000 solid 2px;

display: block;

margin: 50px auto;

border-radius: 50%;

transition: all 2.0s;

}

img:hover{

transform: rotate(360deg);

}

效果如图所示：