运用CSS3实现风琴导航效果

野性酷女 2022-03-25 04:54 214阅读 0赞

运用CSS3实现风琴导航效果

开发工具与关键技术：DW和CSS3
    作者：黄厚润
    撰写时间：2019年01月16日

下面我们使用CSS3来实现风琴导航的部分，下面我们来看一个例子，如图一所示是潘老师所讲的外卖点餐案例中的风琴导航图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70] 图1 风琴导航图 ![在这里插入图片描述][20190118163724934.PNG] 图2 风琴导航图  
在截图中，我们可以看到，每一列的标签，出来的时间是不一样的，那么如何实现风琴导航的效果呢。  
1、首先给所有的标签一个水平位移transform: translateX(110px)，使其大部分隐藏在div外，如图二所示。  
![在这里插入图片描述][20190118163804681.PNG]  
图三 风琴导航图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 1] 图4 为每个a标签设置延迟时间 （以上代码引用之潘老师的外面点餐案列）  
2、随后，我给其设置个伪类hover鼠标移入移出事件，效果为当鼠标移入时，所以标签会回到原位transform: translateX(0px)，并运用CSS3中的transition为其设置动画效果，如图三所示。  
3、接下来就是为每一个标签设置一个延迟时间transition-delay，如图四所示。就完成了一个漂亮的风琴导航了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190118163655285.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw==,size_16,color_FFFFFF,t_70
[20190118163724934.PNG]: /images/20220325/30bae5f8c0f44a64ad9f580c6f0d3580.png
[20190118163804681.PNG]: /images/20220325/0a645aecc1d4488bb724b523b296b9d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 1]: /images/20220325/3ed5b9924eab49aa87f2b21602c67f08.png