纯CSS实现手风琴效果

前言

前段时间看到一个用纯CSS实现的手风琴效果，感觉比较有意思且实用，因此简单研究了一下代码，写篇短文记录下来。

先来看一下效果：

实现原理

代码不难，很容易能看懂。纯CSS 实现手风琴特效主要是依靠 transition 属性，然后通过计算宽度的变化，来实现特效。主要思路如下：

1. 假设我们的图片宽度是640px，图片数量5张，图片收起的时候宽度是40px，那么图片总宽度为 640+4*40 = 800px。
2. 图片默认显示的宽度为 800/5 = 160px。
3. 接下来只要鼠标hover到图片上，宽度变成 640px，其它图片宽度变成 40px，再配合 transition 属性，就可以实现动效了。

核心代码：

// 总宽度
.accordian {
    width: 805px;
    height: 320px;
    overflow: hidden;

    /*Time for some styling*/
    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
// 默认宽度
.accordian li {
    position: relative;
    display: block;
    width: 160px;
    float: left;
    border-left: 1px solid #888;
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    /*Transitions to give animation effect*/
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

// 隐藏的宽度
.accordian ul:hover li {
    width: 40px;
}

// hover之后的宽度
.accordian ul li:hover {
    width: 640px;
}

总结

到此为止，我们已经完成了纯CSS实现手风琴特效的思路分析，希望能够对大家有所帮助~ 完整代码地址在这里：Pure CSS - Image Slider - 码上掘金 (juejin.cn)