CSS3图片旋转特效(360/60/-360度)


Posted in HTML / CSS onOctober 10, 2013

由于没法展示效果只是截了个图
CSS3图片旋转特效(360/60/-360度) 
下面是实现代码:

复制代码
代码如下:

<style>
p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}
p#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>
<b>360度旋转 onmouseover和onmouseout</b></p>
<p id="socialicons">
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" _fcksavedurl=""http://www.zzsck.org/wp-content/uploads/2013/10/rss.png"" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" /></a>
</p>
<p><b>60度旋转 onMouseover and onMouseout</b></p>
<p id="socialicons2">
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" /></a>
</p>
<p><b>-360度旋转 onMouseover</b></p>
<p id="socialicons3">
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" /></a>
</p>

HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
css3图片边框border-image的用法
Jun 30 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 #HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 #HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 #HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 #HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 #HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 #HTML / CSS
css3进行截取替代js的substring
Sep 02 #HTML / CSS
You might like
PHP操作Memcache实例介绍
2013/06/14 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
js日期对象兼容性的处理方法
2014/01/28 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python中正则表达式详解
2017/05/17 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
python保留小数位的三种实现方法
2020/01/07 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
统计工作个人总结
2015/03/03 职场文书
公司内部升职自荐信
2015/03/27 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers