使用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;
}