CSS3实现头像旋转

最新推荐文章于 2024-02-03 11:10:21 发布

erdouzhang

最新推荐文章于 2024-02-03 11:10:21 发布

阅读量752

点赞数

分类专栏：图片

本文链接：https://blog.csdn.net/erdouzhang/article/details/60966948

版权

图片专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用CSS3实现鼠标悬停时头像旋转的效果。通过添加transition属性设置平滑过渡时间为2秒，并使用transform属性令头像旋转360度。

摘要由CSDN通过智能技术生成

在线展示：鼠标放上头像旋转
鼠标未放上效果：
这里写图片描述

鼠标放上之后旋转效果：

这里写图片描述

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>

erdouzhang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现头像旋转

在线展示：鼠标放上头像旋转鼠标未放上效果：鼠标放上之后旋转效果：transition: all 2.0s;表示所有的属性变换在2秒内完成；transform: rotate(360deg);表示图片旋转360度。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>
复制链接

扫一扫

专栏目录