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。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180122A10CUC00?refer=cp_1026

扫码关注云+社区