首页 技术 正文
技术 2022年11月7日
0 收藏 766 点赞 1,018 浏览 870 个字

  效果很好玩,代码很简单:

  效果:

    鼠标放置在图片上:360度顺时针旋转

通过CSS3实现:鼠标悬停图片360度旋转效果

  鼠标离开图片:图片260度逆时针旋转

  通过CSS3实现:鼠标悬停图片360度旋转效果

  只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果

  

<!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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,893
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,422
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,240
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,054
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,683
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,720