纯css实现手风琴效果

效果图

代码

html

    <div class="demo">
        <ul>
            <li>
                <p>剑<br>侠<br>客</p>
                <div>不达成功誓不休。</div>
            </li>
            <li>
                <p>逍<br>遥<br>生</p>
                <div>从不浪费时间的人，没有工夫抱怨时间不够。</div>
            </li>
            <li>
                <p>飞<br>燕<br>女</p>
                <div>要热爱书，它
            </li>
            <li>
                <p>英<br>女<br>侠</p>
                <div>乐观的人永葆青春。</div>
            </li>
            <li>
                <p>巫<br>蛮<br>儿</p>
                <div>乐观的人永葆青春。</div>
            </li>
            <li>
                <p>偃<br>无<br>情</p>
                <div>乐观的人永葆青春。</div>
            </li>
        </ul>
    </div>

css

* {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

.demo {
    height: 230px;
    overflow: hidden;
    margin-left: 50px;
    border-radius: 8px;
}

.demo ul {
    height: 230px;
    display: flex;

}
.demo p{
    height: 230px; 
}

.demo li {
    position: relative;
    overflow: hidden;
    width: 50px;
    transition: width 2s linear .1s; // 指定要进行过渡的css属性:witdh  设置对象过渡的持续时间:2s 设置对象中过渡的动画类型:linear 线性   对象延迟过渡的时间: 0.1s


}

.demo li p {
    position: relative;
    z-index: 9;
    width: 50px;
    height: 230px;
    padding-top: 10px;
    background: #e5654c;
    color: #fff;
}

.demo li div {
    width: 100%;
    height: 230px;
    background: yellow;
    color: black;
    position: absolute;
    top: 0;
    left: 50px;
}

.demo li:hover {
    width: 400px;
}

.demo li+li {
    border: 2px solid #fff;
}

结尾

• 感谢大家抽空看本文章，主要用到一个transition，不太懂的小伙伴可以看，背景属性深入理解及动画综合应用