本文主要介绍如何用css设置鼠标移动图标的旋转效果(如何用css实现)，下面一起看看如何用css设置鼠标移动图标的旋转效果(如何用css实现)相关资讯。
鼠标加速的图标旋转效果在企业项目中经常使用，尤其是在顶部导航栏中，比如:接下来用css实现鼠标移动图标的旋转效果。div，img，body {存款:0；填充:0；} box { height:150 px；；宽度:300px；背景:# 1b7b80；保证金:0车；填充物:20px；}框:img {悬停。变换:旋转(180度)；webkit的变换:旋转(180 deg)；-moz变换:旋转(180 deg)；-o-transform:旋转(180度)；ms:旋转变换(180度)；} img {margin: 0车；显示块；过渡:所有0.2s缓解；webkit的转型:所有0.2s中的缓解；-moz过渡:完全0.2s缓解；-o转换:所有0.2s缓解；这里有一个盒子。盒子里有一幅画。为了看得更清楚，这里放了一个更大的图，现在的效果是当鼠标移动到图标的时候。盒子，img会旋转180度。在风格上，关键是img的设定框:盘旋img。首先，我们需要设置转换属性img首先在属性中指定的和时间的动画。然后到达。框设置鼠标移动时的动作:img悬停180度旋转:变换:旋转(180度)；以下设置，如webkit 主要是建立与供应商的兼容性。;的浏览器。结果如下图所示。以上是边肖介绍的实现鼠标图标旋转效果的css，希望对你有所帮助。如果您有任何问题，请给我留言，边肖将及时回复您。感谢您对网站的支持。
了解更多如何用css设置鼠标移动图标的旋转效果(如何用css实现)相关内容请关注本站点。