web前端：CSS3制作炫酷的下拉框

CSS3炫酷的下拉框的原理：

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

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

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

效果图

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

HTML代码

CSS

完整的代码

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

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

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

这里还是要推荐下小编的web前端学习 群 : 569146385，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括 小编自己整理的一份最新的web前端资料和0基础入门教程，欢迎初学和进 阶中的小伙伴。在不忙的时间我会给大家解惑。