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实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
2006/12/14 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
python爬虫增加访问量的方法
2019/08/22 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
道德之星事迹材料
2014/05/03 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
2014年班主任工作总结
2014/11/08 职场文书
旷课检讨书
2015/01/26 职场文书
党员个人总结范文
2015/02/14 职场文书
企业法人代表证明书
2015/06/18 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
python opencv通过4坐标剪裁图片
2021/06/05 Python