用HTML5+CSS3做一个好看的界面
效果图:
鼠标经过图像的时候会触发hover 1s内转一圈=-=
代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>MyHtml.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=gb2312">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
*{ margin:0;padding=0;}
body{background: url("../images/辉夜.jpeg") scroll;}
li {list-style: none;}
#box{
width: 1070px;
height: 630px;
margin: 50px auto;
}
#box ul li{
position:relative;
float: left;
width: 180px;
height: 105px;
background: rgba(0,0,0,0.5);
margin:30px 5px;
color:black;
}
#box ul li.six{
margin-left:100px;
}
#box ul li div{
position:absolute;
top:0;
left:0;
width:180px;
height: 105px;
background: black;
}
#box ul li:before,#box ul li:after{
content:"";
position:absolute;
top:0;
left:0;
width:180px;
height: 105px;
background: rgba(0,0,0,0.5);;
}
#box ul li:before{
transform:rotate(60deg);
}
#box ul li:after{
transform:rotate(-60deg);
}
#box ul li img{
position: absolute;/*定位*/
z-index:2;/*层级关系 配套定位使用*/
transition:all 1s;
margin: 0 40px;
}
#box ul li:hover img{
transform:scale(1.4) rotate(360deg);
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li class="six">
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
<li>
<img alt="1" src="../images/luoma.jpg"width="100" height="100">
</li>
</ul>
</div>
</body>
</html>