1. 程式人生 > >CSS製作手風琴式的動畫

CSS製作手風琴式的動畫

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