php 中鼠标移上,如何使用CSS实现鼠标上移图标旋转的效果

不念不忘少年蓝@ 2022-10-21 04:58 120阅读 0赞

这篇文章主要介绍了CSS实现鼠标上移图标旋转效果,需要的朋友可以参考下

鼠标上移图标旋转效果在企业的项目中经常会使用到，特别是顶部导航栏，比如：

![a8c7eb9c430ddac5db7354f93682ed9c.gif][]

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

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;

\}

![Image 1][]

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

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

transform: rotate(180deg);

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

得到的效果如下图所示：

![a57074b9758949d8ee79ba738ad4163d.gif][]

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

[a8c7eb9c430ddac5db7354f93682ed9c.gif]: /images/20221021/5d80c4d043c0483e92622db461a38e4f.png
[Image 1]: 
[a57074b9758949d8ee79ba738ad4163d.gif]: /images/20221021/8faa90b3c8ee48848c7404a71d39d91b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，120人围观）

还没有评论，来说两句吧...

相关阅读

相关 php 中鼠标移上,如何使用CSS实现鼠标上移图标旋转的效果

这篇文章主要介绍了CSS实现鼠标上移图标旋转效果,需要的朋友可以参考下鼠标上移图标旋转效果在企业的项目中经常会使用到，特别是顶部导航栏，比如： ![a8c7eb9c430

不念不忘少年蓝@/ 2022年10月21日 04:58/ 0 赞/ 121 阅读

相关 jquery鼠标移上图片变暗

<!doctype html> <html> <head> <meta charset="utf-8"> <title>hover</t

àì夳堔傛蜴生んèń/ 2022年09月26日 11:54/ 0 赞/ 172 阅读

相关 jquery 图片自由拼凑，鼠标移上图片晃动效果代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

迈不过友情╰/ 2022年08月23日 11:53/ 0 赞/ 123 阅读

相关 jquery鼠标移上div切换

样式： .tb_box{ padding:20px; position: absolute; left:0; right:0; width: 50%;margin:a

偏执的太偏执、/ 2022年07月21日 02:17/ 0 赞/ 164 阅读

相关 JS之鼠标移上显示，鼠标移开隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

我不是女神ヾ/ 2022年07月12日 02:46/ 0 赞/ 674 阅读

相关 JS之鼠标移上显示，鼠标移开隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

淩亂°似流年/ 2022年07月12日 02:46/ 0 赞/ 298 阅读

相关 js 鼠标移入渐变效果

通过opacity来设置透明度0为全透明,1为不透明，通过修改这个值来达到渐变 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

左手的ㄟ右手/ 2022年06月13日 22:28/ 0 赞/ 224 阅读

相关 CSS cursor 鼠标移入变图标事件

<table style="border:0px;margin:4px 0px;padding:0px;width:729px;color:rgb(51,51,51);font

爱被打了一巴掌/ 2022年05月24日 05:58/ 0 赞/ 261 阅读

相关纯CSS实现鼠标移入显示图标效果

1、效果预览在淘宝或京东商城我们经常看到这样的效果：鼠标移动除某一个位置时出现下拉菜单，或者显示一个图标，那么这是如何实现的呢？我们今天就用CSS来实现鼠标移入时显示图

淩亂°似流年/ 2022年03月07日 07:10/ 0 赞/ 800 阅读

相关通过jquery实现鼠标移入移出效果、jQuery中的动画隐藏、显示效果实现

通过jquery实现鼠标移入移出效果鼠标移入用mouseover方法鼠标移出用mouseout方法但是，jquery给我们提供了一个复合事件替换mouseover

太过爱你忘了你带给我的痛/ 2021年12月11日 09:45/ 0 赞/ 820 阅读