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 相关文章推荐
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 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源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
PHP创建XML接口示例
2019/07/04 PHP
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
python异步Web框架sanic的实现
2020/04/27 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
nginx配置限速限流基于内置模块
2022/05/02 Servers