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

最新推荐文章于 2023-06-13 16:55:12 发布

jiaweimin123

最新推荐文章于 2023-06-13 16:55:12 发布

阅读量528

点赞数

分类专栏： html css 文章标签： css 动画手风琴

html 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

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

jiaweimin123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 手风琴菜单效果，图片动画

Title KungFu Panda <img src="http://www.2cto.com/uploadfile/Collfiles/20140225/20140225085908528.jpg" style="width: 630px; height: 315px;
复制链接

扫一扫