用css来实现简单的手风琴效果_css实现手风琴效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45249263/article/details/123855143

本文主要讲述的是用html+css来实现一个简单的手风琴案例，即可实现简单的展开/收起的功能

效果图：

HTML+CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴案例——看小说</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }   

        body{
            background-color: #222;
        }

        .box{
            width: 500px;
            border: 2px solid rgb(110, 77, 0);
            margin: 200px auto;
            box-sizing: border-box;
            background-color: white;
            padding: 6px;
        }

        .box div{
            margin-bottom: 10px;
        }

        a{
            text-decoration: none;
            width: 98%;
            display: block;
            background: linear-gradient(rgb(97, 95, 95),rgb(139, 139, 139));
            height: 70px;
            border-radius: 5px;
            margin: 10px auto;
            position: relative;
            font: 16px/70px "宋体";
            text-indent: 10px;
            color: #000;
            letter-spacing: 4px;
        }

        i{
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-left-color: #fff;
            position: absolute;
            top: 27px;
            right: 18px;
        }

        p{
            height: 0px;
            width: 94%;
            overflow: hidden;
            margin: 0 auto;
            font: 14px/20px "宋体";
            text-indent: 28px;
            padding-right: 10px;
            letter-spacing: 2px;
            transition: height 1.5s;
        }

        #p4 a{
            text-align: center;
        }

        .box div:target p{
            overflow-y: scroll;
            height: 200px;
            
        }

        .box div:target a{
            background: skyblue;
            color: white;
            font-weight: 800;
        }

        .box div:target i{
            border-color: rgb(0, 0, 0) transparent transparent transparent;
            top: 30px;
            right: 20px;
        }

        .box a:active p{
            height: 0;
        }

    </style>
</head>

<body>
    <div class="box">
        <div id="p1">
            <a href="#p1">剑来——第三百四十四章<i></i></a>
            <p>埋河水神庙的庙祝老妪，是当地刺史府邸的亲信，除了刺史大人的引荐，她自己又花了许多家底银子，跟蜃景城礼部衙门打点关系，才得以占据这么个油水十足的位置，不知有多少练气士眼红，老妪先前以焚香高神的手段，跟碧游府告状，这会儿不用水神娘娘提点什么，自己就消停了，彻底没了报复的心思，不敢，万万不敢。

                </p>
        </div>
        <div id="p2">
            <a href="#p2">剑来——第三百四十五章<i></i></a>
            <p>如钟魁所说，埋河女神总计炼化了九件兵器，其中两件跻身法宝之列，在与河妖厮杀的过程中，打坏了三件，那些都是她能够在两百多年内，稳稳压下河妖的制胜法宝，就是她的兵器数量实在多了点。

                世间女子出门郊游，是换脂粉、换衣裙，这位埋河水神娘娘，巡视辖境，是看心情选择兵器傍身。
                
                </p>
        </div>
        <div id="p3">
            <a href="#p3">剑来——第三百四十六章<i></i></a>
            <p>裴钱说要去大门口那边看那堵影壁，上边庙里头的香火会飘，还有香味，水流会动，还有声响，太有意思了。

                水神娘娘大手一挥，招来一位妙龄婢女，带着裴钱去那边赏景。
                
                </p>
        </div>
        <div id="p4">
            <a href="#">别看了别看了，快去学习！</a>
        </div>
    </div>
</body>

</html>