如何用CSS3制作出风琴效果

如何用CSS3制作出风琴效果

开发工具与关键技术：html

作者：盘洪源

撰写时间：2019年2月4日星期六

一开始我以为制作风琴效果需要用到JS，但用CSS3动画也能实现，如下图

一开始是这样，然后通过风琴效果变成如下图

首先这上面基本的CSS样式就不多说了，一开始就是内容部分先隐藏起来，然后通过CSS3动画鲜果再将内容部分呈现出来，这样一个简单的风琴效果就能实现了。

重要的部分就是需要在内容上面加上动画效果的代码，如下图

这上面的translateX就是向左位移多少个像素的意思，就是通过伪类然后向左位移多少像素。

然后后面的给每个a标签设置动画的延迟时间，如下图

后面的就是动画实现的延迟时间，只要一个比一个慢就能实现出风琴效果来。