使用CSS简单实现手风琴效果

 结构初始效果图：

 

点击效果图：

使用此结构创建手风琴结构

<ul>

            <li>

                <div class="hd">树<br>读</div>

                <div class="bd">

                    <img src="./images/shudu.jpg" alt="">

                </div>

            </li>

<ul>

 然后设置样式

 * {

            margin: 0;

            padding: 0;

        }

 

        body {

            background-color: #eee;

        }

 

        h1 {

            text-align: center;

            margin: 100px 0 20px;

        }

 

        .box {

            position: absolute;

            left: 50%;

            transform: translateX(-50%);

            /* 240+6+30*6=426  40 30 1*/

            /* width: auto; */

            width: 426px;

            height: 200px;

        }

 

        .box ul li {

            float: left;

            width: auto;

            height: 200px;

            list-style: none;

            border-right: 1px solid #fff;

        }

 

        .box ul li .hd {

            float: left;

            height: 100%;

            /* width: 30px; */

            width: 70px;

            /* 过渡 */

            transition: width 0.7s ease-in;

 

            /* 字体设置 */

            font-size: 26px;

            background: linear-gradient(180deg, #99d9ea, #a349a4, #ed1c24);

            color: transparent;

            -webkit-background-clip: text;

        }

 

        .box ul li .bd {

            float: left;

            height: 100%;

            /* 初始化宽度为0 */

            width: 0px;

            background-color: pink;

            transition: width 0.7s ease-in;

        }

 

        .box ul li .bd img {

            width: 100%;

            height: 100%;

        }

 

        .box:hover ul li .hd {

            width: 30px;

        }

 

        .box ul li:hover .bd {

            width: 220px;

        }