css实现鼠标上移图标旋转效果
来源:互联网 发布:淘宝积分有什么用处 编辑:程序博客网 时间:2024/06/06 14:13
鼠标上移图标旋转效果在企业的项目中经常会使用到,特别是顶部导航栏,比如:
接下来就是要使用css实现鼠标上移图标旋转效果。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div,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> <div class="box"> <img src="img/down.png" alt=""/> </div></body></html>这里放了一个盒子,盒子中放了一个图片,为了能看得更加清晰,这里放一个比较大的图片。现在要实现的效果是,鼠标移到.box的盒子上时,图标img将会做一个180度的旋转。
style中,关键是img和.box:hover img的设置,首先我们需要先给img设置transition属性,这里的属性指定了动画的方式和持续时长。然后给.box设置当鼠标上移时:hover时img的动作为旋转180度:
transform: rotate(180deg);下方的如-webkit-的设置主要为了兼容各厂商的浏览器而设置的。
得到的效果如下图所示:
阅读全文
0 0
- css实现鼠标上移图标旋转效果
- css实现鼠标放到图片旋转效果
- 纯css样式实现盒子 3D 旋转、鼠标悬停效果
- 鼠标悬停旋转的图标按钮特效(纯CSS)
- css实现鼠标各种图形效果
- 纯CSS实现图像鼠标悬停效果
- 用css实现的鼠标悬停效果
- js实现上移下移效果
- unity2d 实现物体跟随鼠标绕一个点旋转效果
- unity2d 实现物体跟随鼠标绕一个点旋转效果
- CSS3实现一个鼠标跟随动态旋转效果
- html和css实现 字体变色 旋转 图标渐变
- android动画效果实现-页面上移效果
- 纯CSS3图标旋转效果
- 实现图标不停旋转
- css 鼠标 经过 效果
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- oracle 设置归档模式
- #山外K60函数 FTM_PWM_…
- #C运算符 位运算符
- 【每日一题】 -1和1的数值比较
- 【每日一题】 优先级、左移问题
- css实现鼠标上移图标旋转效果
- 【每日一题】 -1和1的数值比…
- 舵机的原理和控制
- com.android.ide.common.signing.KeytoolException:Failed to read key meihuo from store
- 表达式树的值
- java环境变量path的设置
- 蓝桥杯训练:排序——快速排序
- Mysql-proxy 2.0看起来还挺不错的嘛
- for test