手风琴效果 HTML+CSS

牧羊人_sj

于 2022-08-15 23:24:47 发布

阅读量365

点赞数 1

分类专栏： css 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_59347596/article/details/126356770

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

利用css选择器加 :hover 直接复制即可

<!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>
</head>

<body>
    <h2>手风琴</h2>
    <div class="accordion">
        <div data-color='red'></div>

        <div data-color='orange'></div>

        <div data-color='yellow'></div>

        <div data-color='green'></div>

        <div data-color='cyan'></div>

        <div data-color='blue'></div>

        <div data-color='indigo'></div>


    </div>

</body>
<style>
    .accordion {
        display: flex;
        width: 600px;
        height: 200px;
    }

    .accordion > div {
        flex: 1;
        cursor: pointer;
        transition: all 300ms;
    }

    .accordion > div:hover{
        flex: 10;
        cursor: pointer;
    }

    .accordion > div[data-color='red'] {
        background-color: red;
    }

    .accordion > div[data-color='orange'] {
        background-color: orange;
    }

    .accordion > div[data-color='yellow'] {
        background-color: yellow;
    }

    .accordion > div[data-color='green'] {
        background-color: green;
    }

    .accordion > div[data-color='cyan'] {
        background-color: cyan;
    }

    .accordion > div[data-color='blue'] {
        background-color: blue;
    }

    .accordion > div[data-color='indigo'] {
        background-color: indigo;
    }
</style>

</html>

大家有更好的实现方法可以留言