CSS实现--手风琴（简单）

待我称王封你为后i 2022-12-09 03:30 436阅读 0赞

先上效果图，一点一点写的自己麻烦，别人也不会好好看，我找的时候也就是直接看代码适合就拿哈哈哈哈哈

![2020092120205541.gif][]直接上自己写的代码，有一处没有处理好，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc3ODA0_size_16_color_FFFFFF_t_70][]

view里面会多出来一点，然后我就直接把view的背景色弄成和body的背景色相同，就不会有灰色的那一块了

上自己的菜鸡代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background-color: #222222;
            }
            .view{
                margin: 100px auto;
    
                width: 1300px;
                background-color: #222222;
    
                display: flex;
                
                
            }
            .view .item{
                width: 172px;
                height: 260px;
                background-position: center center;
    
                
                overflow: hidden;
    
                transition: all 0.2s;
            }
    
    
            .item div{
                text-align: center;
                color: white;
                font-size: 30px;
    
                background:rgba(0,0,0,0.6);
                height: 260px;
    
                writing-mode: vertical-lr;
                width: 100%;
    
                line-height: 170px;
                letter-spacing: 10px;
                transition: all 0.2s;
            }
    
            .item div:hover{
                opacity: 0;
            }
            .view .item:hover{
                width:400px
            }
    
            .view .item1{
                background-image: url(images/img1.jpg);
            }
            .view .item2{
                background-image: url(images/img2.jpg);
            }
            .view .item3{
                background-image: url(images/img3.jpg);
            }
            .view .item4{
                background-image: url(images/img4.jpg);
            }
            .view .item5{
                background-image: url(images/img5.jpg);
            }
            .view .item6{
                background-image: url(images/img6.jpg);
            }
            .view .item7{
                background-image: url(images/img7.jpg);
            }
    
            
        </style>
    </head>
    <body>
        <div class="view">
            <div class="item item1">
                <div>温泉酒店</div>
            </div>
            <div class="item item2">
                <div>情侣酒店</div>
            </div>
            <div class="item item3">
                <div>设计酒店</div>
            </div>
            <div class="item item4">
                <div>青年旅舍</div>
            </div>
            <div class="item item5">
                <div>特色客栈</div>
            </div>
            <div class="item item6">
                <div>海岛酒店</div>
            </div>
            <div class="item item7">
                <div>海外温泉</div>
            </div>
        </div>
    </body>
    </html>

这样子也可以当作完成作业啦！

附上案例的代码吧，现在看其实比较简单，但是有心思的你来看看吧

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin:0;
                padding:0
            }
            body{
                background: #222222;
            }
            .view{
                margin:100px auto;
                display: flex;
                width: 1200px;
            }
            .view .item{
                width: 172px;
                overflow: hidden;
                background-position: center center;
                height:260px;
                transition: all .2s;
            }
            .item div{
                text-align: center;
                background: rgba(0,0,0,0.6);
                color:white;
                font-size:30px;
                height:260px;
                writing-mode: vertical-lr;
                width: 100%;
                line-height: 172px;
                letter-spacing: 5px;
                transition: all .2s;
            }
            .item1{
                background-image: url(images/img1.jpg);
            }
            .item2{
                background-image: url(images/img2.jpg);
            }
            .item3{
                background-image: url(images/img3.jpg);
            }
            .item4{
                background-image: url(images/img4.jpg);
            }
            .item5{
                background-image: url(images/img5.jpg);
            }
            .item6{
                background-image: url(images/img6.jpg);
            }
            .item7{
                background-image: url(images/img7.jpg);
            }
            .view:hover .item{
                width: 133px;
            }
            .view:hover .item div{
                line-height: 133px;
            }
            .view .item:hover{
                width:400px
            }
            .view .item:hover div{
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div class="view">
            <div class="item item1">
                <div>温泉酒店</div>
            </div>
            <div class="item item2">
                <div>情侣酒店</div>
            </div>
            <div class="item item3">
                <div>设计酒店</div>
            </div>
            <div class="item item4">
                <div>青年旅舍</div>
            </div>
            <div class="item item5">
                <div>特色客栈</div>
            </div>
            <div class="item item6">
                <div>海岛酒店</div>
            </div>
            <div class="item item7">
                <div>海外温泉</div>
            </div>
        </div>
    </body>
    </html>

[2020092120205541.gif]: /images/20221123/292ca1da0f594eb8845a48b1426ffa48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc3ODA0_size_16_color_FFFFFF_t_70]: /images/20221123/828ea8d8d3034f15a6dc6aacdaeba063.png