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

不念不忘少年蓝@ 2022-10-21 04:58 162阅读 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 条评论，162人围观）

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

相关阅读

相关阴影效果CSS收藏+按钮鼠标移上缓慢变色代码

box-shadow: 0 6px 8px rgba(0,0,0,.2); ![这里写图片描述][SouthEast] .auth-form input[t

我就是我/ 2024年02月18日 14:30/ 0 赞/ 17 阅读

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

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

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

相关 jquery鼠标移上图片变暗

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

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

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

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

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

相关 jquery鼠标移上div切换

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

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

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

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

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

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

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

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

相关 js 鼠标移入渐变效果

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

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

相关 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 赞/ 312 阅读

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

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

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