用HTML5+CSS3做一个好看的界面

最新推荐文章于 2024-05-24 16:55:01 发布

夜行旅人

最新推荐文章于 2024-05-24 16:55:01 发布

阅读量1.2w

点赞数 4

本文链接：https://blog.csdn.net/Asatoga/article/details/79460820

版权

效果图:

鼠标经过图像的时候会触发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">


<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>

夜行旅人

关注

4
点赞
踩
35

收藏

觉得还不错? 一键收藏
5
评论
用HTML5+CSS3做一个好看的界面

效果图:鼠标经过图像的时候会触发hover 1s内转一圈=-=代码:&lt;!DOCTYPE html&gt;&lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;title&gt;MyHtml.html&lt;/title&gt; &lt;meta name="keywords" content="keyword1,key
复制链接

扫一扫