纯css 制作手风琴

最新推荐文章于 2024-08-13 14:51:58 发布

A be real

最新推荐文章于 2024-08-13 14:51:58 发布

阅读量110

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44812649/article/details/111042651

版权

在这里插入图片描述
/本例子：手风琴采用弹性布局中特性：flex-grow实现（其他方法可以使用宽度百分比悬浮时修改所占比例，）/

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html,
        .box {
            height: 100%;
            width: 100%;
        }

        .box {
            background-color: gray;
            display: flex;
        }

        .child {
            cursor: pointer;

            background-color: #0094ff;
            flex-grow: 1;
            /* border: solid 2px red; */
            transition: all 0.5s;
            text-align: center;
            font-size: 50px;
            color: white;
            background-repeat: no-repeat;
            /* background-size: contain; */
            /* background-size:cover; */
            background-size: 100% 100%;

        }

        .child:hover {
            flex-grow: 18;

        }

        .child:nth-child(even) {
            /* background-color: red; */
            background-image: url(https://www.jq22.com/demo/css3sfq20170111/img/9.png);
        }

        .child:nth-child(odd) {
            background-image: url(https://www.jq22.com/demo/css3sfq20170111/img/6.png);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
        <div class="child">9</div>
        <div class="child">10</div>
    </div>
</body>

</html>