风琴效果的表现与实现

风琴效果的表现与实现

现在让我来谈谈我对风琴效果的理解，那么先让我们来看看HTML部分的代码：

它由一个一个类来把a标签包住，a标签把p标签包住，p标签里有一个字母，当然你也可以写别的字随自己的爱好写上去这样一个风琴的HTML就完成了，接下来就是它的css部分的代码了：

上面的两张图片就是css部分的代码了，里面设计了风琴的样式分别是风琴的背景颜色、长度、动画效果、位移等等。图2里面折起来的代码是跟它前面那一个类一样的，不过里面的位移时间不一样也就是transition-duration不一样它是依次加0.2秒，一直加到3.2秒，其中nth-child（）这个是选则第几个什么列如图中的nth-child（2）就是选则第二个a标签而且nth-child（）在什么后面就是选则第几个什么就如上面的a标签，当然它的第一个也可以写成frist-child也可以最后一个就是last-child。最后然我们来看看他的鼠标没有移入的摸样：

我设计的是横向的风琴效果你们也可以设计竖着的风琴效果接下来看看鼠标移入的模样：

这就是鼠标移入的效果了它是第一个先到达底部的然后依次到达底部，当然鼠标移出也是第一个先恢复原样的当然你要等它全部到达底部才可以的不然不是第一个先恢复原样。