css3动画实现下拉菜单动画：web前端CSS3制作炫酷的下拉框

CSS3炫酷的下拉框的原理：

1.首先就是一个导航下拉，就是鼠标放上去出现一个下拉列表

2.然后发现，下拉里面，每一个选项是从不同的两个方向出现的

3.出现的方式是奇数项从左边进，偶数项从右边进，进入方式是滑动淡入。

效果图

其实这个是用CSS3过渡和动画制作的，没有用到JS也是可以做出这样的效果，那么他的代码是怎样的呢？我给大家罗列出来：

HTML代码

CSS

完整的代码

代码有点多已经上传到群文件里了，最后也说下小编的群，可以分享交流，小编也会经常分享一些资料干货供大家学习：661473108，欢迎初学和进阶中的小伙伴。

这个动画，我感觉虽然性能上css3是比js要好一些。毕竟js也是控制css或者class来实现！

灵活性的话，这个就要比js差了，比如div的显示与隐藏，我不想通过鼠标移入移出的方式控制，如果我想通过点击的方式控制div的显示与隐藏呢。对于js的方式来说，这个就是触发的事件就可以了，对于插件来说，可能就改一个插件就行了！对于css3实现的话，这个就不但要改css样式了，也要改html结构了！

这里，我的建议就是，这个动画最理想的还是用js和css3结果，结果是最好的。如果针对灵活性不高的需求，可以只用css3。