css3手风琴效果
手风琴效果:
1.
2.
......
代码:
<!doctype>
<html>
<head>
<title>css3手风琴效果</title>
<meta charset="utf-8"/>
<meta name="Keywords" content="服务，服务"/>
<meta name="decription" content=""/>
<style>
/*泡沫层去除*/
*{padding:0;margin:0;}
/*大盒子*/
.main{
width:1180px;
height:405px;
border:3px solid #000;
overflow:hidden;
}
ul,li{list-style:none;}
/*小盒子*/
.list{width:2000px;}
.list li{
width:130px;
height:405px;
float:left;
transition:1s;
}
.list li:hover{
width:538px;
}
</style>
</head>
<body>
<div class="main">
<ul class="list">
<li><img src="img/0.jpg" width="538" height="405"/></li>
<li><img src="img/1.jpg" width="538" height="405"/></li>
<li><img src="img/2.jpg" width="538" height="405"/></li>
<li><img src="img/3.jpg" width="538" height="405"/></li>
<li><img src="img/4.jpg" width="538" height="405"/></li>
<li><img src="img/5.jpg" width="538" height="405"/></li>
</ul>
</div>
</body>
</html>分析:
主要还是css3的使用，还有就是float浮动的使用，
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18