CSS 实现鼠标移动头像旋转

摘要:忘记那天突然看见别人的站头像居然可以旋转,这么炫酷,那我也要酷,然后就酷起来了,具体效果看本站首页头像。
<!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="https://www.yanghaihua.com/public/images/timg.jpg" />
    </body>
</html>

实现其实很简单,需要用到 CSS3 的两个属性 transition 和 transform。主要关键的设置是 transition 属性,transition:all 2.0s; 这里的属性指定了动画的方式和持续时长,transform:rotate(360deg); 这里的属性指当鼠标移动上图片后,图片旋转 360 度。

结束语:感谢您对本网站文章的浏览,欢迎您的分享和转载,但转载请说明文章出处。
Top