CSS3技术实现下酷炫拉框

这篇文章给大家介绍的是一个利用CSS3实现的酷炫的下拉框，实现后效果真的非常不错，文中给出了详细实现过程和示例代码，接下来就由成都网站建设工程师为大家详细介绍。

可见，我们并没有利用原生的 select 元素，而是利用其它元素来模拟这个效果。我们为 li 元素指定了 data-value,主要是接下来我们会用 JQuery 获取选中值并将其放置到 p 元素下。

下面逐步来看 CSS 代码。

1、设置 p 和 ul 元素的背景颜色和边框等设置。

2、为 p 元素单独指定样式，并设置其 position 属性，主要是为了下面绘制右侧的下拉按钮。

3、利用 :after 在p 元素的右方绘制下拉按钮，可以看出来，我们是利用左下边框然后旋转 -45 度 模拟的这个效果。值得注意的是，我们需要将其 display 设置为 block，并且设置宽高，否则看不到这个效果。

1、设置 ul 的一些默认属性，并将其设置大宽度为 0，指定 overflow-y 为 auto ，这个时候ul 将会被隐藏。

2、在这里设置的时候我遇到了一个问题，就是 li 标签始终占不满 ul 的一行，那是因为其默认有 margin 和 padding ，所以在一开始的时候就将网页中所有元素的外边距和内边距设置成了 0。

1、为 open 设置大高度，并为其指定动画效果。

2、将下拉按钮旋转 -225 度，并为其指定动画。

下面我们看看为 ul 元素指定的 slide-down 动画效果，这也是这个下拉特效的关键所在。

看到以上代码可能就都明白了，就是不断改变 ul 的大小，让其在 0.75-1.25 之间进行缩放，所以就会有那个跳动的效果了。

下面还有一些简单的 CSS 代码，不再解释。

CSS 讲完了，下面就可以看看我们是如何利用 JQuery 控制这个效果的。

1、首先为 p 标签绑定 click 事件，在触发的时候，为 select 添加或移除 open class, 也就是将 ul 显示出来。

2、为 li 绑定 click 事件，当选中了一个 li 元素的时候，首先获取到 data-value，然后将其赋值给 p 标签，然后为选中的 li 添加 selected class,与此同时利用 siblings() 方法，让兄弟节点的 selected class 移除。

3、为 document 设置click 事件，当我们点击网页中任何一处地方的时候，如果 ul 是打开的，就将其关闭，不过这个时候由于所有元素都在 document 内，所以我们需要阻止事件冒泡，调用自己写的 cancelbubble() 方法。

以上关于CSS3技术实现下酷炫拉框均属成都网站建设工程师的个人观点，大家如果对此有着不同的见解，可以关注公众号“创新互联”给我留言，大家可以交流一下自己的心德体会，共同学习进步。

新闻名称：CSS3技术实现下酷炫拉框
URL网址：https://www.cdcxhl.com/news20/322370.html

成都网站建设公司_创新互联，为您提供App设计、做网站、标签优化、全网营销推广、外贸建站、自适应网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联