【CSS3】分类菜单效果
程序员文章站
2022-03-20 20:24:05
HTML ......
html
<html>
<head>
<title></title>
<style type="text/css">
#bg { width: 1270px; height: 751px; margin: 0 auto; background: url("images/bg.jpg") no-repeat; }
.sblock { width: 800px; height: 250px; margin: 0 auto;}
/*.sblock { transform:translatey(65%); }*/
.sblock > div { width: 200px; height: 250px; margin: 0 auto; }
.sb1 { padding-top: 170px; }
.sb2 { padding-top: 30px; }
.sblock div:hover { transform: translatey(-10px); }
.sblock div { transition:all 0.5s; }
.sb1 > div:nth-of-type(1) { float: left; background: url("images/1.jpg") no-repeat; }
.sb1 > div:nth-of-type(2) { float: left; background: url("images/2.jpg") no-repeat; }
.sb1 > div:nth-of-type(3) { float: left; background: url("images/3.jpg") no-repeat; }
.sb1 > div:nth-of-type(4) { float: left; background: url("images/4.jpg") no-repeat; }
.sb2 > div:nth-of-type(1) { float: left; background: url("images/5.jpg") no-repeat; }
.sb2 > div:nth-of-type(2) { float: left; background: url("images/6.jpg") no-repeat; }
.sb2 > div:nth-of-type(3) { float: left; background: url("images/7.jpg") no-repeat; }
.sb2 > div:nth-of-type(4) { float: left; background: url("images/8.jpg") no-repeat; }
</style>
</head>
<body>
<div id="bg">
<section class="sblock sb1">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section class="sblock sb2">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
</body>
</html>
上一篇： c++语言虚函数实现多态的原理
下一篇： 前端之移动页面布局