CSS3图片旋转特效
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
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>
</head>
<body>
<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>
</body>
</html>
CSS3图片旋转特效的更多相关文章
- html5+css3图片旋转特效
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
- 40免费的 jQuery & CSS3 图片热点特效
jQuery CSS3 形象悬停效果可能是一个优秀的网站项目中添加的效果.这个特殊的收集是大约50个 jQuery CSS3 形象徘徊影响最近出版的.这些图像悬停效果可以作为一个有效的和创造性的方式添 ...
- css3图片旋转
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- 纯css3图片旋转展示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- CSS3 图片旋转
.nav_all { position:relative; z-index:; width:172px; display:inline; ; } .nav_all b { display:block; ...
- CSS3动画旋转——（图片360°旋转）
今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...
- 强大！HTML5 3D美女图片旋转实现教程
又到周末,来弄点HTML5的特效玩玩,今天要折腾的是HTML5 3D图片特效,图片在垂直方向上被分割成一条条小矩形,在图片上拖动鼠标即可让每一个小矩形旋转,从而让图片形成3D立体的效果,来看看效果图: ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- C++利用注册表添加桌面右键新建菜单
对于程序员来说,新建一个cpp文件是再频繁不过的事情了. 为了方便,我们习惯在桌面右键新建文件,而不是新建一个文本文档,然后修改后缀名. 百度谷歌查询了一下,终于知道如何添加注册表. 手痒,抽出时间用 ...
- 在Qt中使用AnyCAD三维建模控件
AnyCAD C++ SDK专为Qt框架增加了AnyPlatformQt.lib模块,在Qt中使用AnyCAD三维建模控件变得十分简单. 下载 Qt高速下载:http://pan.baidu.com/ ...
- android应用商店完整版源码
这个是从一个安卓学习的网站上转载过来的,android应用商店完整版源码,大家可以看看一下吧. _op><ignore_js_op> <ignore_js_op>< ...
- winfrom 导入Excel表到access数据库（来自小抽奖系统）
网上有很多这种方法,本人只是针对自己的系统来实现的 //导入excel表 private void ImportTSMenu_Click(object sender, EventArgs e) { O ...
- Spark提交任务到集群
提交Spark程序到集群与提交MapReduce程序到集群一样,首先要将写好的Spark程序打成jar包,再在Spark-submit下通过命令提交. Step1:打包程序 Intellij IDEA ...
- Linux Shell脚本编程的注意事项
Linux下(Shell脚本 http://www.jbxue.com/jb/shell/)编程的一些注意事项,如编程风格.命名风格等. 一.常用技巧 ssh user@server bash < ...
- 【坑】log4j-over-slf4j.jar AND slf4j-log4j12.jar的冲突问题
为了解决这个问题,已经有砸电脑的冲动了.通过百度查找都说是Maven依赖的原因,经过各种尝试仍然没有解决,后来终于在QQ群的帮助下,算是暂时过关. [问题] 程序在本地运行没有问题,打成jar包发布到 ...
- arm 基本
ARMr0-r4 传递参数与返回值r7 帧指针 指向母函数被调用子函数在栈看中的交界栈帧指针(Frame Pointer).指向前一个保存的栈帧(stack frame)和链接寄存器(link reg ...
- apache 403错
<Directory />Options FollowSymLinksAllowOverride NoneOrder deny,allowAllow from all</Direct ...
- VIM编辑器常用功能整理笔记
vim编辑器 vi : visual Inertface 可视化接口 vim : vi improved 扩展版 语法着色 模式化编辑器: 编辑模式(命令模式): 默认模式 输入模式: 末行模式: 等 ...