您的位置：首页 > 其它

鼠标画上去图片旋转360度

2016-01-12 16:39 459 查看

**鼠标画上去图片旋转360度**

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标画上去图片旋转360度</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body{padding:0;margin:0;}
ul{list-style: none;}
.wap{width:900px;margin:10px auto;border: 1px solid #ccc;}
.wap ul li{margin:8px;float: left;box-shadow: 0px 0px 5px #ccc;background: #fff;padding: 12px;transition:1s;}
.wap ul li:hover{transform:rotate(360deg);-webkit-transform:rotate(360deg);}
.clearfix:after{content:".";clear: both;height:0;visibility: hidden;display:block;}
.clearfix{*+height: 1%;}
</style>
</head>
<body>
<div class="wap clearfix">
<ul>
<li><img src="js_02.png" height="188" width="166"></li>
<li><img src="js_03.png" height="188" width="166"></li>
<li><img src="js_04.png" height="188" width="166"></li>
<li><img src="js_05.png" height="188" width="166"></li>
<li><img src="js_06.png" height="188" width="166"></li>
<li><img src="js_07.png" height="188" width="166"></li>
<li><img src="js_08.png" height="188" width="166"></li>
<li><img src="js_10.png" height="188" width="166"></li>
<li><img src="js_11.png" height="188" width="166"></li>
</ul>
</div>
</body>
</html>

注释：

1、transition:1s

2、transform:rotate(360deg)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航