通过CSS3实现:鼠标悬停图片360度旋转效果
效果很好玩,代码很简单:
效果:
鼠标放置在图片上:360度顺时针旋转
鼠标离开图片:图片260度逆时针旋转
只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停图片360度旋转效果</title>
<style>
.xwcms {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url(%E6%8B%9B%E5%95%86/img/arrow.gif) left top;
-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;
}
.xwcms:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
} </style>
</head>
<div class="xwcms">
</div>
<body>
</body>
</html>
推荐一个神一样的网站,上面有各种特效:http://www.xwcms.net/
以上
END
通过CSS3实现:鼠标悬停图片360度旋转效果的更多相关文章
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- HTML5+CSS3鼠标悬停图片特效
点击预览效果 下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
- 15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 原生Js封装的产品图片360度展示
挺简单的一段程序,但是效果不错: 1.把需要展示的36张图片先预加载到浏览器缓存里 2.给展示图片的div添加方法 3.通过鼠标左右移动的像素转换图片 在线效果预览:http://jsfiddle.n ...
- 基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法
CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...
- [置顶] ios 360度旋转效果demo
demo功能:用UIimageView实现360度旋转效果. demo说明:iPhone6.1 测试成功.主要代码在:FVImageSequence.m中.在touchesMoved事件中,通过替换U ...
- CSS3鼠标悬停图片动画
鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...
随机推荐
- java程序员的从0到1:@Resource与@Autowired的比较
目录: 1.@Resource与@Autowired的源码分析 2.@Resource与@Autowired的相同点 3.@Resource与@Autowired的不同点 正文: 1.@Resourc ...
- java算法外传之靠工资多久能实现小目标...
public static void main(String[] args) { //小目标 final int smallGoal=100_000_000; //月份 int month=1; // ...
- Android viewpager + fragment取消预加载
1,在fragment中重写setUserVisibleHint方法private boolean isVisibleToUser;@Overridepublic void setUserVisibl ...
- centos 7 安装 最小化 碰到的问题
1)分区推荐 2)更新yum源 (收藏 https://mirror.webtatic.com/yum/el7/) cd /etc/yum.repos.d/ 更新源 wget http://mirr ...
- Java对象排序两种方法
转载:https://blog.csdn.net/wangtaocsdn/article/details/71500500 有时候需要对对象列表或数组进行排序,下面提供两种简单方式: 方法一:将要排序 ...
- github访问慢解决
参考:https://github.com/chenxuhua/issues-blog/issues/3 hosts文件: # GitHub Start 192.30.253.112 github.c ...
- c++中enum 如何使用(转)
ENUM概况 enum枚举类型是C/C++中的一种数据类型,与struct和class一样是用户自定义的类型,其特点在于enum类型的变量取值是有限的,是可以一一列举出来的. ENUM定义 C++ e ...
- Tab 插件(一)
前言 使用Jquery封装插件,使代码复用不需要每个功能重新编写代码只需修改传入参数. jQuery 插件常见到有类开发 和对象开发模式, 在下边介绍两种模式使用,初次编写,有误拍砖. jQuery ...
- visual stdio使用
现在转换使用visual stdio,因为很多和以前的快捷键不同,也不打算换了,这样可移动性应该更好吧. 1.注释代码, 首先按下ctrl + k,然后再按下ctrl + c 2.取消注释,首先按下c ...
- python 字符串转字节数组
场景: java加解密和python加解密互转的时候,因一些非显示字符无法确认两者是否一致,故需要打出他们的十六进制字节数组进行比较 1.python代码实现 str='123';print str. ...