您的位置：首页 > Web前端 > CSS

css 手风琴菜单效果，图片动画

2017-10-16 12:21 567 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="shoufengqin.css">
</head>
<body>
<div class="accordian">
<ul>
<li>
<div class="image_title">KungFu Panda</div>
<img src="http://www.2cto.com/uploadfile/Collfiles/20140225/20140225085908528.jpg"
style="width: 630px; height: 315px; ">
</li>
<li>
<div class="image_title">Toy Story 2</div>
<img src="http://www.2cto.com/uploadfile/Collfiles/20140225/20140225085909529.jpg"
style="width: 630px; height: 315px; ">
</li>
<li>
<div class="image_title">Wall-E</div>
<img src="http://www.2cto.com/uploadfile/Collfiles/20140225/20140225085909530.jpg"
style="width: 630px; height: 315px; ">
</li>
<li>
<div class="image_title">Up</div>
<img src="http://www.2cto.com/uploadfile/Collfiles/20140225/20140225085910531.jpg"
style="width: 630px; height: 315px; ">
</li>
<li>
<div class="image_title">Cars 2</div>
<img src="http://www.2cto.com/uploadfile/Collfiles/20140225/20140225085911532.jpg"
style="width: 630px; height: 315px; ">
</li>
</ul>
</div>
</body>
</html>
css部分：
/* 让顶盒子居中显示 */.accordian{width:850px;margin:100px auto;background-color: red;}/* 配置li */.accordian li{list-style:none;width:160px;height: 320px;float:left;position:relative;overflow:hidden;border-left:2px solid rgba(255,255,255,.8);}/* 配置图像信息盒子 */.accordian li .image_title{position:absolute;width:100%;height:50px;background-color:rgba(0,0,0,.5);text-indent:2em;line-height:50px;bottom:0;color:#f1f1f1;text-align: center;}/* hover之后所有的li宽改为40px,不然会挤下去 */.accordian ul:hover li{width:40px;}/* hover之后激活的li宽为640px，注意这两个设置有先后顺序 */.accordian ul li:hover{width:640px;}.accordian li{transition:all 1s;}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                css
                                                动画
                                                手风琴
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航