头像变圆圈并转动代码

最新推荐文章于 2024-06-20 00:04:40 发布

今生唯梦

最新推荐文章于 2024-06-20 00:04:40 发布

阅读量802

点赞数

分类专栏： JavaWeb

JavaWeb 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用CSS实现图片圆形显示及鼠标悬停时的旋转效果的方法。通过设置border-radius属性为50%，可以将图片转换为圆形。同时，利用:hover伪类结合transform属性，实现了当鼠标悬停在图片上时，图片会完成360度旋转的视觉效果。

ycyjkj{
border-radius:50%;
-webkit-transition:.4s all ease-in-out;
-moz-transition:.4s all ease-in-out;
-o-transition:.4s all ease-in-out;
-ms-transition:.4s all ease-in-out;
transition:.4s all ease-in-out;
//这是把图片变为圆圈
}

ycyjkj:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
//这是图像旋转
}