CSS3炫酷的下拉框的原理:

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

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

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

html5下拉按钮样式修改(CSS3制作炫酷的下拉框)(1)

效果图

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

html5下拉按钮样式修改(CSS3制作炫酷的下拉框)(2)

HTML代码

html5下拉按钮样式修改(CSS3制作炫酷的下拉框)(3)

CSS

html5下拉按钮样式修改(CSS3制作炫酷的下拉框)(4)

完整的代码

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

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

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

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

,