风琴导航的制作
风琴导航的制作
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：DW
作者：黄海浪
撰写时间：2019年2月1日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
风琴导航的制作其实很简单，想要实现风琴导航的效果只要用到CSS3的一个位移的动画效果就行，下图为实际效果（注：引用潘老师的外卖点餐系统案例）
图中画圈的部分就是风琴导航，一开始是缩进去的当移入进去的时候就会依次弹出来，当鼠标移出的时候又会依次缩进去
看一下代码部分你就会发现风琴导航的制作很简单，先给它设置一个位移的距离，然后用
Transition设置一些属性，主要是设置一个总的位移时间，然后分别给每一个a标签(注：这里代码是a标签)都设置一个延迟时间，每一个的延迟时间都是依次递增的