如何用CSS3制作出风琴效果
开发工具与关键技术:html
作者:盘洪源
撰写时间:2019年2月4日星期六
一开始我以为制作风琴效果需要用到JS,但用CSS3动画也能实现,如下图
一开始是这样,然后通过风琴效果变成如下图
首先这上面基本的CSS样式就不多说了,一开始就是内容部分先隐藏起来,然后通过CSS3动画鲜果再将内容部分呈现出来,这样一个简单的风琴效果就能实现了。
重要的部分就是需要在内容上面加上动画效果的代码,如下图
这上面的translateX就是向左位移多少个像素的意思,就是通过伪类然后向左位移多少像素。
然后后面的给每个a标签设置动画的延迟时间,如下图
后面的就是动画实现的延迟时间,只要一个比一个慢就能实现出风琴效果来。