首页 / CSS / 详解CSS实现鼠标上移事图标旋转效果的方法

详解CSS实现鼠标上移事图标旋转效果的方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解CSS实现鼠标上移事图标旋转效果的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1562字，纯文字阅读大概需要3分钟。

内容图文

鼠标上移图标旋转效果在企业的项目中经常会使用到，特别是顶部导航栏，本文主要介绍了CSS实现鼠标上移图标旋转效果,需要的朋友可以参考下，希望能帮助到大家。

详解CSS实现鼠标上移事图标旋转效果的方法 - 文章图片

接下来就是要使用css实现鼠标上移图标旋转效果。


<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        p,img,body{  
            margin: 0;  
            padding: 0;  
        }  
        .box{  
            height: 150px;  
            width:300px;  
            background: #1b7b80;  
            margin: 0 auto;  
            padding: 20px;  
        }  
        .box:hover img{  
            transform: rotate(180deg);  
            -webkit-transform: rotate(180deg);  
            -moz-transform: rotate(180deg);  
            -o-transform: rotate(180deg);  
            -ms-transform: rotate(180deg);  
        }  
        img{  
            margin: 0 auto;  
            display: block;  
            transition: all 0.2s ease-in-out;  
            -webkit-transition: all 0.2s ease-in-out;  
            -moz-transition: all 0.2s ease-in-out;  
            -o-transition: all 0.2s ease-in-out;  
        }  
    </style>  
</head>  
<body>  
    <p class="box">  
        <img src="img/down.png" alt=""/>  
    </p>  
</body>  
</html>

这里放了一个盒子，盒子中放了一个图片，为了能看得更加清晰，这里放一个比较大的图片。现在要实现的效果是，鼠标移到.box的盒子上时，图标img将会做一个180度的旋转。

style中，关键是img和.box:hover img的设置，首先我们需要先给img设置transition属性，这里的属性指定了动画的方式和持续时长。然后给.box设置当鼠标上移时:hover时img的动作为旋转180度：


transform: rotate(180deg);

下方的如-webkit-的设置主要为了兼容各厂商的浏览器而设置的。

得到的效果如下图所示：

详解CSS实现鼠标上移事图标旋转效果的方法 - 文章图片

相关推荐：

如何实现HTML中鼠标经停时整行（tr）变色

怎样用CSS让鼠标悬停在图片上图片变灰

html中由元素上的鼠标点击触发的事件属性onclick

以上就是详解CSS实现鼠标上移事图标旋转效果的方法的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的详解CSS实现鼠标上移事图标旋转效果的方法全部内容，希望文章能够帮你解决详解CSS实现鼠标上移事图标旋转效果的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/412688.html

来源：【匿名】