CSS3 鼠标悬停图片360度旋转特效

首页 > IT技术

作者：起点终站

2016年6月14日 10:45 星期二

字号：小中大

评论：0

一个用HTML5/css3写成的图片旋转特效，鼠标放上后图片就开始不停的旋转，对CSS3动画效果感兴趣的，更不可错过哦，用CSS3实现动画效果很不错的范例。

以下为全部代码：

<!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:no-repeat url("favicon.ico") 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;}.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>