航海王_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> ![十大酷炫屌的圖像懸停特效[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)