CSS手风琴效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_60897029/article/details/141887376

代码仅供参考

<!DOCTYPE html>
<html lang="enabled">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box{
            width: 400px;
            height: 350px;
            border: 1px solid black;
            margin: 100px auto;
        }
        a{
            display: block;
            height: 50px;
            background-color: black;
            color: white;
            text-align: center;
            line-height: 50px;   
        }

        #box1:target{
            height: 200px;
            background: url(https://i2.hdslb.com/bfs/archive/b5d6ed3f90097c5ed71c0e5fb2a50ec3d4798c21.jpg@672w_378h_1c_!web-home-common-cover.avif);
            background-size: 100% 100%;
        }
        #box2:target{
            height: 200px;
            background: url(https://i1.hdslb.com/bfs/archive/c10be4c7bb86b29e7c94eaa25542833484db21d6.jpg@672w_378h_1c_!web-home-common-cover.avif);
            background-size: 100% 100%;
        }
        #box3:target{
            height: 200px;
            background: url(https://i1.hdslb.com/bfs/archive/f024a44c91695c0a7890b07224f62bbcfd1322bb.jpg@672w_378h_1c_!web-home-common-cover.avif);
            background-size: 100% 100%;
        }

        .box div{
            transition: 3s;
            height: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#box1">开关1</a>
        <div id="box1">灯1</div>
        <a href="#box2">开关2</a>
        <div id="box2">灯2</div>
        <a href="#box3">开关3</a>
        <div id="box3">灯3</div>
    </div>
</body>
</html>