<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴</title>
<style>
*{ margin:0px; padding:0px;}
ul,li{ list-style:none; }
.menu{width:1200px;height:360px;margin:50px auto;overflow:hidden;}
.menu img{width:980px;height:360px;}
.menu .img{width:200px;height:360px;overflow:hidden;position:relative;transition:all 0.5s;float:left;box-shadow:-2px -2px 2px #FFF;}
.menu .img p{position:absolute;text-align:center;color:#FFF;line-height:360px;background:rgba(102,102,102,0.6);}
.menu .img .top{width:100%;height:360px;top:0px;left:0px;transition:all 0.5s;}
.menu .img .bottom{width:100%;height:360px;bottom:0px;left:0px;}
.menu .img:hover .top{height:30px;line-height:30px;}
.menu .img:hover .bottom{height:30px;line-height:30px;}
.menu:hover .img{width:44px;}
.menu .img:hover{width:980px;}
</style>
</head>
<body>
<div class="menu">
<div class="img">
<img src="images/1.jpg"/>
<p class="top">米奇有限公司</p>
<p class="bottom">米奇有限公司</p>
</div>
<div class="img">
<img src="images/2.jpg"/>
<p class="top">米奇有限公司</p>
<p class="bottom">米奇限公司</p>
</div>
<div class="img">
<img src="images/3.jpg"/>
<p class="top">米奇有限公司</p>
<p class="bottom">米奇有限公司</p>
</div>
<div class="img">
<img src="images/4.jpg"/>
<p class="top">米奇有限公司</p>
<p class="bottom">米奇有限公司</p>
</div>
<div class="img">
<img src="images/5.jpg"/>
<p class="top">米奇有限公司</p>
<p class="bottom">米奇有限公司</p>
</div>
<div class="img">
<img src="images/6.jpg"/>
<p class="top">米奇有限公司</p>
<p class="bottom">米奇有限公司</p>
</div>
</div>
</body>
</html>
CSS制作手风琴式的动画
猜你喜欢
转载自blog.csdn.net/Beucejiang/article/details/53759938
今日推荐
周排行