CSS3鼠标悬停360度旋转效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CSS3鼠标悬停360度旋转效果</title>
<style>
* {
margin:0;
padding:0;
list-style:none;
}
body {
background:#1F1F1F;
}
.zzsc {
width: 220px;
height: 220px;
margin: 0 auto;
background: red;
-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
border-radius: 100px;
-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;
}
.zzsc:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
</style>
</head>
<body>
<div class="zzsc"></div>
<div style="text-align:center;clear:both;">
</div>
</body>
</html>

CSS3鼠标悬停360度旋转效果相关推荐

通过CSS3实现：鼠标悬停图片360度旋转效果
效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转鼠标离开图片:图片260度逆时针旋转只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...
CSS3鼠标悬停图片显示遮罩特效
transform:translateY(50px); transform:translateY(0px); 这两行代码实现了元素从下向上移动 opacity:0; opacity:0.5; 遮罩是通 ...
html语言鼠标悬停特效,CSS3鼠标悬停文字幻影动画特效
这是一款CSS3鼠标悬停文字幻影动画特效.该特效利用before和after伪元素来制作当鼠标悬停在超链接文本上的时候的幻影效果. 使用方法在页面中引入bootstrap.css.jquery和ph ...
基于9款CSS3鼠标悬停相册预览特效
基于9款CSS3鼠标悬停相册预览特效里面包含九款不同方式的相册展开特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="albums& ...
css3鼠标悬停图片特效，图片悬停效果
css3鼠标悬停图片特效,图片悬停效果代码如下: <title>css3鼠标悬停图片特效,图片悬停效果源码</title><style>*{box-sizing: ...
css3鼠标悬停按钮颜色文字变化
下载地址css3鼠标悬停在按钮上的特效,颜色和文字变化切换成其它的 dd:
css3动画旋转360度,CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例...
CSS3旋转动画(360度旋转.旋转放大.放大.移动) 用法和实例 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explo ...
CSS3鼠标悬停图片遮罩动画js特效
下载地址纯CSS3图片鼠标悬停动画特效 dd:
HTML5+CSS3 鼠标悬停3D立体图片效果
效果图: 设置一个盒子,里面放两个div. 2.div旋转并设阴影. 3.加伪类,使鼠标移入这个盒子的时候div有动画效果. 这样就完成应该是一个鼠标悬停立体图片的效果.
css3鼠标悬停图片边框线条动画特效
css3鼠标经过内容区时,边框线条特效效果制作. html: <div class="strength grWidth hidden"><div class=&q ...

CSS3鼠标悬停360度旋转效果

CSS3鼠标悬停360度旋转效果相关推荐

最新文章

热门文章