最近看了国外大佬用CSS3实现手风琴效果的视频,所以自己学习后写了一下,以博客的形式记录下来,方便自己日后复习,代码结构如下(字体用的是Genericons ): 最终效果如下: 全屏时: 屏幕宽度小于960px时: 下面来看一下页面的基本结构(index.html): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"