【css酷炫效果】纯CSS实现手风琴折叠效果

news2025/3/31 6:19:22

【css酷炫效果】纯CSS实现手风琴折叠效果

缘
创作背景
html结构
css样式
完整代码
效果图

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492015

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

    <div class="accordion">
        <div class="accordion-item">
            <input type="checkbox" id="item1" class="accordion-checkbox">
            <label for="item1" class="accordion-header">手风琴卡，点击展开</label>
            <div class="accordion-content">
                <p>哇唔，你好棒，点击收起</p>
            </div>
        </div> 
    </div>

css样式

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.accordion {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.accordion-item {
    margin-bottom: 10px;
}

.accordion-checkbox {
    display: none;
}

.accordion-header {
    display: block;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    user-select: none;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #fff;
    padding: 0 10px;
    border-radius: 5px;
}
/* styles.css - continued */
.accordion-checkbox:checked + .accordion-header + .accordion-content {
    max-height: 200px; /* 可以根据需要调整 */
    padding: 10px;
}

完整代码

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

<title>页面特效</title>
<style type="text/css">
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.accordion {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.accordion-item {
    margin-bottom: 10px;
}

.accordion-checkbox {
    display: none;
}

.accordion-header {
    display: block;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    user-select: none;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #fff;
    padding: 0 10px;
    border-radius: 5px;
}
/* styles.css - continued */
.accordion-checkbox:checked + .accordion-header + .accordion-content {
    max-height: 200px; /* 可以根据需要调整 */
    padding: 10px;
}
</style>

</head>
<body>
    <div class="accordion">
        <div class="accordion-item">
            <input type="checkbox" id="item1" class="accordion-checkbox">
            <label for="item1" class="accordion-header">手风琴卡，点击展开</label>
            <div class="accordion-content">
                <p>哇唔，你好棒，点击收起</p>
            </div>
        </div> 
    </div>

</body>
</html>