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 ...
随机推荐
- MallBuilder 多用户商城管理系统 v5.8.1.1
MallBuilder是一款基于PHP+MYSQL的多用户网上商城解决方案.利用MallBuilder可以快速建立一个功能强大的类似京东商城.天猫商城.1号店商城的网上商城,或企业.行业化.本地化和垂 ...
- POJ C++程序设计 编程题＃1 大整数的加减乘除
编程题#4:大整数的加减乘除 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 ...
- responseXML 属性
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...
- 别不拿里程碑当石头---------IT项目管理之项目计划（转）
如果说做项目不需要计划,恐怕没人会认同.是否每个项目计划都起到了作用呢?却不尽然.知道要做计划,但不知道为什么做计划,如何做计划的还是大有人在.所以很多计划沦为依样画葫芦,成了摆设. IT项目计划的用 ...
- 学习c的第7天
#include <stdio.h> int main() { int x=0; if (x==0) { printf("x为假\n"); } else { print ...
- .NET软件汉化小实例
Author:KillerLegend Date:2014.6.18 From:http://www.cnblogs.com/killerlegend/p/3795577.html 好的,今天我们来汉 ...
- C# 平时碰见的问题【5】
vs按F5启动调试,项目不会编译的解决办法 工具 -> 选项 -> 项目和解决方案 -> 运行时, 当项目过期(下拉框) -> 不要选[从不生成] 附英文版的:
- ARM中MMU地址转换理解
首先,我们要分清ARM CPU上的三个地址:虚拟地址(VA,Virtual Address).变换后的虚拟地址(MVA,Modified Virtual Address).物理地址(PA,Physic ...
- 如何在windows下安装python第三方包
python安装第三方库一般方式和easy_install方式 2010-06-24 17:43:53| 分类: Python | 标签:python |字号 订阅 python安装第三 ...
- goto语句 switch语句
goto语句 #include <iostream> using namespace std; int main() { int i = 1; number: i++; std::cout ...