给图片或文字加上鼠标悬浮时旋转动画

一个很简单的css即可实现图片或文字鼠标悬浮时旋转动画。这里就简单的说一下2d旋转。 首先用到 transform 属性,具体代码如下:

transform:rotate(360deg);
-ms-transform:rotate(360deg); 	/* IE 9 */
-moz-transform:rotate(360deg); 	/* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); 	/* Opera */

其中 -ms-transform 支持IE9浏览器,-moz-transform 支持火狐浏览器,-webkit-transform 支持苹果浏览器和谷歌浏览器,-o-transform 支持欧朋浏览器。

一般想要适用所有浏览器,就全部都加上。后面的注释可以自己删掉。360deg 表示旋转360度,自己修改就行了。

然后,鼠标悬浮就需要用到 hover ,结合上述 transform 属性,具体css代码即为:

example-img:hover {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
}

这时已经实现了鼠标悬浮到图片上时,图片旋转360度。但是,是看不到旋转动画的,因为是秒选转。所以这时需要用到 transition 属性,结合上述代码。 

html示例代码

<img class="example-img" src="图片地址" /> 

css示例代码

 .example-img:hover {
 transform:rotate(360deg);
 -ms-transform:rotate(360deg); 
 -moz-transform:rotate(360deg); 
 -webkit-transform:rotate(360deg); 
 -o-transform:rotate(360deg); 
 transition:.5s;
 -webkit-transition:.5s;
 -moz-transition:.5s;
 -o-transition:.5s
 }

其中 .5s 为过渡时间,自己修改下。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

优化网站用户体验的tip

兼容性:Firfox6+, Safari5.1+,IE 10+。chrome不支持

852
来自专栏python3

tkinter -- 文本的多行显示

使用 width 和 heigth 来指定控件的大小,如果指定的大小无法满足文本的要求,

1805
来自专栏deepcc

jquery nicescroll 配置参数

4058
来自专栏HTML5学堂

新浪面试真题

1.请写出一张图片的HTML代码,已知道图片地址为“images/abc.jpg”,宽100px,高50px 2.请问display:none和visibili...

35311
来自专栏青青天空树

认识基本的mfc控件

  几乎可以在每个windows程序中都看到按钮、复选框、文本框以及下拉列表等等,这些都是控件。而且很多常用的控件已经内置到操作系统当中了,在Visual C+...

1002
来自专栏HTML5学堂

img中alt与title辨析

HTML5学堂:img中alt与title有何不同?本文主要从表现在含义、浏览器中的表现以及对于网站seo优化程度三个方面进行辨析,接下来我们一起来看看。 示例...

2473
来自专栏做全栈攻城狮

.Net程序员快速学习安卓开发-布局和点击事件的写法

我们新建一个layout布局文件时,默认就是相对布局。相对布局是相对于非相对布局来说的。顾名思义,相对布局就是 相对于某些控件位置的布局。所有的控件都是相对位置...

1374
来自专栏React Native开发圈

React Native悬浮按钮组件

因为用到了react-native-vector-icons图标组件,需要做下link。如果你项目中已经使用了react-native-vector-icons...

2722
来自专栏河湾欢儿的专栏

04-修改 维护

想要改变图标的位置? 新功能,加个图标? 画布太大,文件空白太多? 图标多余,要删除?

1032
来自专栏性能与架构

微信小程序示例 - 交互组件

消息提示框 toast ? 代码结构 <toast bindchange="..."> 消息内容 </toast> 属性 duration - 消息显示...

4338

扫码关注云+社区

领取腾讯云代金券