纯CSS实现手风琴，input 复选框来实现点击展开效果。

小白筋

已于 2024-01-04 01:30:39 修改

阅读量490

点赞数 6

文章标签： css 前端服务器

于 2024-01-04 01:28:40 首次发布

本文链接：https://blog.csdn.net/Vluy1246/article/details/135376104

版权

效果图

概述：通过该案例可以提升CSS基础知识，css样式，标签选择器，通过媒体查询，窗口大小排版布局，以及弹性布局。有一定基础的同学

html结构部分

1通过定义input 实现点击切换内容，checked 默认属性，后面通过[属性=value] 实现展效果。

    <input type="radio" id="animal" name="wiki" value="Animal" checked>
    <input type="radio" id="plant" name="wiki" value="Plant">
    <input type="radio" id="space" name="wiki" value="Space">
    <input type="radio" id="river" name="wiki" value="River">

html部分

<ul class="accordion">
        <!-- 1 -->
        <li data-radio="animal">
            <label for="animal" class="accordion-title">
                <span>01</span>
                <span class="accordion-heading">javascript</span>
            </label>
            <div class="accordion-content">用代码记录生活</div>
        </li>
        <!-- 2 -->
        <li data-radio="plant">
            <label for="plant" class="accordion-title">
                <span>02</span>
                <span class="accordion-heading">CSS</span>
            </label>
            <div class="accordion-content">
                网格布局,弹性布局，浮动布局
            </div>
        </li>
        <!-- 3 -->
        <li data-radio="space">
            <label for="space" class="accordion-title">
                <span>03</span>
                <span class="accordion-heading">VUE</span>
            </label>
            <div class="accordion-content">
                框架之神
            </div>
        </li>
        <!-- 4 -->
        <li data-radio="river">
            <label for="river" class="accordion-title">
                <span>04</span>
                <span class="accordion-heading">nodejs</span>
            </label>
            <div class="accordion-content">
                发现知识
            </div>
        </li>
    </ul>

CSS样式

选择inout 通过绝对定位隐藏

input[type="radio"] {
position: absolute;
left: -9999px;
}

/*  -----自定义颜色–––-*/
:root {
    --accordion-color: #282828;
    --title-color: #191919;
    --active-color: #3e86d2;
    --separator-color: #292c2d;
    --white: #9b9b9b;
    --red: #e74c3c;
    --black: #000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

label {
    cursor: pointer;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* 全部选中input */
input[type="radio"] {
    position: absolute;
    left: -9999px;
}

body {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 50px 0;
    font: 1rem/1.5 'Muli', sans-serif;
    /* background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.a20878fcf8c15ebef39e7cf9d08d9b96?rik=F%2f1WAk2UsiWGkQ&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fphotoblog%2f1112%2f09%2fc4%2f9895861_9895861_1323440595643.jpg&ehk=crUxOBm%2f2cTKKaU6CMEDcUhaa%2b48XXEOazjOEkcHrLA%3d&risl=&pid=ImgRaw&r=0); */
}

伪类元素插入数据 content: '伪元素';

/* ------before 伪类元素插入内容----- */
.accordion::before {
    content: '伪元素';
    position: absolute;
    right: 0;
    top: -20px;
    font-size: 0.8rem;
    color: var(--black);
}

1.属性让你更改一个元素变形的原点

transform-origin: bottom;

2.rotate()这个属性的应用原理是先用这个属性的赋值转换该元素，进行变形，然后再用这个属性的值把元素转换回去

transform: rotate(-90deg) translate(50%, 50%);

.accordion .accordion-heading {
    display: inline-block;
    white-space: nowrap;
    transform-origin: bottom;
    transform: rotate(-90deg) translate(50%, 50%);
}

完整代码

html部分

<!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>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <input type="radio" id="animal" name="wiki" value="Animal" checked>
    <input type="radio" id="plant" name="wiki" value="Plant">
    <input type="radio" id="space" name="wiki" value="Space">
    <input type="radio" id="river" name="wiki" value="River">

    <ul class="accordion">
        <!-- 1 -->
        <li data-radio="animal">
            <label for="animal" class="accordion-title">
                <span>01</span>
                <span class="accordion-heading">javascript</span>
            </label>
            <div class="accordion-content">用代码记录生活</div>
        </li>
        <!-- 2 -->
        <li data-radio="plant">
            <label for="plant" class="accordion-title">
                <span>02</span>
                <span class="accordion-heading">CSS</span>
            </label>
            <div class="accordion-content">
                网格布局,弹性布局，浮动布局
            </div>
        </li>
        <!-- 3 -->
        <li data-radio="space">
            <label for="space" class="accordion-title">
                <span>03</span>
                <span class="accordion-heading">VUE</span>
            </label>
            <div class="accordion-content">
                框架之神
            </div>
        </li>
        <!-- 4 -->
        <li data-radio="river">
            <label for="river" class="accordion-title">
                <span>04</span>
                <span class="accordion-heading">nodejs</span>
            </label>
            <div class="accordion-content">
                发现知识
            </div>
        </li>
    </ul>

    <!-- <footer class="page-footer">
        <small>Made with <span>❤</span> by <a href="http://georgemartsoukos.com/" target="_blank">George Martsoukos</a>
        </small>
    </footer> -->

    <script src="./js/index.js"></script>

</body>

</html>

CSS样式

/*  -----自定义颜色–––-*/
:root {
    --accordion-color: #282828;
    --title-color: #191919;
    --active-color: #3e86d2;
    --separator-color: #292c2d;
    --white: #9b9b9b;
    --red: #e74c3c;
    --black: #000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

label {
    cursor: pointer;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* 全部选中input */
input[type="radio"] {
    position: absolute;
    left: -9999px;
}

body {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 50px 0;
    font: 1rem/1.5 'Muli', sans-serif;
    /* background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.a20878fcf8c15ebef39e7cf9d08d9b96?rik=F%2f1WAk2UsiWGkQ&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fphotoblog%2f1112%2f09%2fc4%2f9895861_9895861_1323440595643.jpg&ehk=crUxOBm%2f2cTKKaU6CMEDcUhaa%2b48XXEOazjOEkcHrLA%3d&risl=&pid=ImgRaw&r=0); */
}



.accordion {
    position: relative;
    width: calc(100% - 20px);
    max-width: 800px;
    min-height: 380px;
    margin: 0 auto;
    background: var(--accordion-color);
    color: var(--white);
}

/* ------before 伪类元素插入内容----- */
.accordion::before {
    content: '伪元素';
    position: absolute;
    right: 0;
    top: -20px;
    font-size: 0.8rem;
    color: var(--black);
}

.accordion label {
    text-align: center;
}

.accordion,
.accordion li,
.accordion .accordion-title {
    display: flex;
}

.accordion li:not(:last-child) {
    border: 1px solid var(--separator-color);
}

.accordion .accordion-title {
    flex-direction: column;
    justify-content: space-between;
    width: 70px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: normal;
    padding: 20px 10px;
    background: var(--title-color);
    transition: color 0.1s;
}

.accordion .accordion-title:hover {
    color: var(--active-color);
}

/* 关键点 */
.accordion .accordion-heading {
    display: inline-block;
    white-space: nowrap;
    transform-origin: bottom;
    transform: rotate(-90deg) translate(50%, 50%);
}

.accordion .accordion-content {
    display: none;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 20px;
    font-size: 400;
    color: azure;
}

[value="Animal"]:checked~.accordion [data-radio="animal"],
[value="Plant"]:checked~.accordion [data-radio="plant"],
[value="Space"]:checked~.accordion [data-radio="space"],
[value="River"]:checked~.accordion [data-radio="river"] {
    flex-grow: 1;
}

[value="Animal"]:checked~.accordion [for="animal"]+.accordion-content,
[value="Plant"]:checked~.accordion [for="plant"]+.accordion-content,
[value="Space"]:checked~.accordion [for="space"]+.accordion-content,
[value="River"]:checked~.accordion [for="river"]+.accordion-content {
    display: flex;
}

[value="Animal"]:checked~.accordion [for="animal"],
[value="Plant"]:checked~.accordion [for="plant"],
[value="Space"]:checked~.accordion [for="space"],
[value="River"]:checked~.accordion [for="river"] {
    color: var(--active-color);
}



/* –––––––––––––––––––––响应式––––––––––––––––––––––––––––– */
@media screen and (max-width: 650px) {
    .accordion {
        min-height: 0;
    }

    .accordion,
    .accordion li {
        flex-direction: column;
    }

    .accordion .accordion-title {
        flex-direction: row;
        width: auto;
    }

    .accordion .accordion-heading {
        transform: none;
    }

    .accordion .accordion-title,
    .accordion .accordion-content {
        padding: 20px;
    }
}


/* –––––––––––––––––––––––––––––––– */
/* .page-footer {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 1rem;
    color: var(--black);
}

.page-footer span {
    color: var(--red);
} */

这是本案例的完整代码了，希望对大家有帮助，如果想提升编程水平就多加练习吧，在编程中碰到BUG也不要着急。有解决不了的问题可以加我的联系方法:2415714416。有需要毕设或是期末作业，我会满足您的需求的