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 ...
随机推荐
- 免费在线CAD文件转换
AnyCAD Exchange Cloud 提供在线的CAD文件转换服务,包括二维图纸和三维模型的数据转换. 支持的格式有: DWG/DGN/DXF 到 PDF, SVG, DAE等的转换 STEP/ ...
- 实现在Android简单封装类似JQuery异步请求
在android开发中经常会使用异步请求数据,通常会使用handler或者AsyncTask去做,handler 配合message 使用起来比较麻烦,AsyncTask 线程池只允许128个线程工作 ...
- 淮安团购网美团联盟网赚版 v5.7
淮安团购网,主要是利用美团联盟的hao123版API大家可以注册http://union.meituan.com获取api 核心采用dede5.7所以在安装上没有大的问题,安装好后后台恢复备份就可以了 ...
- .NET Web开发总结(五)
7 常用服务器控件 7.1 服务器控件概述 · 服务器控件是指在服务器上执行程序的代码的组件 通常这些服务器控件会提供 给用户一定的界面, 以便用户与服务器之间快速的交互 7.2 HTML 服 ...
- iOS网络通讯——监测网络状态：Reachability(可达性)
1.iOS平台是按照一直有网络连接的思路来设计的,开发者利用这一特点创造了很多优秀的第三方应用.大多数的iOS应用都需要联网,甚至有些应用严重依赖网络,没有网络就无法正常工作. 2.在你的应用尝试通过 ...
- python 爬虫-sohu抓小说
#coding:utf-8 import urllib2 import sys import re '): realurl = "%s%s%s" %(url,offset,'.sh ...
- python ssh
使用python包paramiko实现通过ssh的安全远程访问 使用pip下载安装paramiko,提示会缺一个crypto包,用pip将这个包也安好,python就可以正常引用paramiko了 一 ...
- 值类型和引用类型（C#基础知识复习）
一.值类型和引用类型 二.值类型的赋值和相等 三.引用类型的赋值和同一
- 算法系列3《SHA》
SHA是一种数据加密算法,该算法经过加密专家多年来的发展和改进已日益完善,现在已成为公认的最安全的散列算法之一,并被广泛使用.该算法的思想是接收一段明文,然后以一种不可逆的方式将它转换成一段(通常更小 ...
- git的工作流程（分支合并）
git支持很多种工作流程,我们采用的一般是这样,远程创建一个主分支,本地每人创建功能分支,日常工作流程如下: 去自己的工作分支$ git checkout work 工作.... 提交工作分支的修改$ ...