使用css3完成风琴效

开发工具与关键技术：DW软件，CSS3效果
作者：陈隆
撰写时间：2019年01月16日

首先用DW软件创建好相关的HTMl和css文件并把css文件引用到HTML页面中，然后再把HTML页面的内容写好，用一个div把所有的内容包裹住，然后div里面再用a标签然后再放一个em标签把需要的内容写进去就行了，css引用方法就是用link来引用就可以了，引用成功就会显示在源代码右方的，引用方法和具体写好的HTML如下图

完成HTML部分之后就开始写css部分了，css部分根据自己的创意来写就可以了，其实都是很简单的部分，css具体代码看下图

完成css之后就到了css3部分了，先用transform: translateX(120px)把所有需要隐藏的a标签向右隐藏好，然后在a标签的父元素写一个伪类弹出a标签，然后再把每一个a标签都设定一个不一样的时间就可以完成了这个风琴效果了，具体代码看下截图

全部内容写好之后再把a标签用transition: all 0.2s ease;设定一个时间内完成就可以起到渐显检出的效果了，这样这个风琴效果就完成了。