航海王_html_css3_旋转效果demo
海贼王_html_css3_旋转效果demo
效果如下图：
下载地址与图片资源：
部分编码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>通缉令</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin: 0px;
padding: 0px; /*通配一下*/
}
#bgbox {
width: 1250px;
height: 740px;
background: url("img/女帝.jpg");
margin: 0px auto; /*确定背景大小及位置,居中*/
}
#left_box {
width: 590px;
float: left;
margin-top: 30px;
margin-left: 5px;
padding: 10px;
}
#left_box li {
list-style: none;
width:161px;
height:170px;
float:left;
padding: 10px;
}
.img1 img {
border-radius: 12px;
width: 161px;
height: 170px;
float: left;
padding: 6px;
border: 3px solid #cccccc;
margin: 5px 2px auto;
cursor: pointer; /*鼠标形状*/
box-shadow: 2px 3px 3px #a1a1a1, -1px -1px 3px #7e7e7e; /*阴影部分*/
}
li:HOVER {
transform: rotate(360deg); /*旋转*/
transition: all 800ms ease; /*旋转时间*/ /*中心点*/
transform:origin(50%,50%)；
}
li:HOVER img{
transform: scale(2.5);/*方法倍数*/
transition: all 1000ms ease;/*运行时间*/
border-radius: 12px; /*圆角*/
}
</style>
</head>
<body>
<div id="bgbox">
<div id="left_box">
<ul>
<li class="img1">
<img src="img/图片1.jpg" />
</li>
<li class="img1">
<img src="img/图片2.jpg" />
</li>
<li class="img1">
<img src="img/图片3.jpg" />
</li>
<li class="img1">
<img src="img/图片4.jpg" />
</li>
<li class="img1">
<img src="img/图片5.jpg" />
</li>
<li class="img1">
<img src="img/图片6.jpg" />
</li>
<li class="img1">
<img src="img/图片7.jpg" />
</li>
<li class="img1">
<img src="img/图片8.jpg" />
</li>
<li class="img1">
<img src="img/图片9.jpg" />
</li>
</ul>
</div>
</div>
</body>
</html>
