运用CSS3实现风琴导航效果
运用CSS3实现风琴导航效果
开发工具与关键技术：DW和CSS3
作者：黄厚润
撰写时间：2019年01月16日
下面我们使用CSS3来实现风琴导航的部分，下面我们来看一个例子，如图一所示是潘老师所讲的外卖点餐案例中的风琴导航图。 图1 风琴导航图
图2 风琴导航图
在截图中，我们可以看到，每一列的标签，出来的时间是不一样的，那么如何实现风琴导航的效果呢。
1、首先给所有的标签一个水平位移transform: translateX(110px)，使其大部分隐藏在div外，如图二所示。
图三 风琴导航图 图4 为每个a标签设置延迟时间 （以上代码引用之潘老师的外面点餐案列）
2、随后，我给其设置个伪类hover鼠标移入移出事件，效果为当鼠标移入时，所以标签会回到原位transform: translateX(0px)，并运用CSS3中的transition为其设置动画效果，如图三所示。
3、接下来就是为每一个标签设置一个延迟时间transition-delay，如图四所示。就完成了一个漂亮的风琴导航了