利⽤CSS实现酷炫的下拉框特效
⾸先来看看要实现的效果图
想要制作这么⼀个效果还是⽐较⿇烦的，但是代码并不难理解。
⾸先，来看看 Html 代码。
XML/HTML Code复制内容到剪贴板
1. <div class="container">
2. <div class="heading">
3. <h2>Custom Select</h2>
4. </div>
5.
6. <div class="select">
7. <p>Please select</p>
8. <ul>
9. <li data-value="HTML5">HTML5</li>
10. <li data-value="CSS3">CSS3</li>
11. <li data-value="JavaScript">JavaScript</li>
12. <li data-value="JQuery">JQuery</li>
13. <li data-value="Backbone">Backbone</li>
14. </ul>
15. </div>
16. </div>
可见，我们并没有利⽤原⽣的 select 元素，⽽是利⽤其它元素来模拟这个效果。我们为 li 元素指定了 data-value，主要是接下来我们会⽤ JQuery 获取选中值并将其放置到 p 元素下。
下⾯逐步来看 CSS 代码。
CSS Code复制内容到剪贴板
1. * {
2. margin: 0;
3. padding: 0;
4. }
5.
6. html {
7. font-family: 'Terminal';
8. font-size: 62.5%;
9. }
10.
11. body {
12. background-color: #33CC66;
13. }
1、将⽹页中所有元素的外边距和内边距设置为 0。
2、将⽹页中的默认字体设置为 Terminal，字体⼤⼩设置为 62.5%, 也就是 10px。
3、设置背景颜⾊为 #33CC66。
XML/HTML Code复制内容到剪贴板
1. <link href='leapis/css?family=Lobster|Terminal+Dosis' rel='stylesheet' type='text/css'>
上⾯我们⽤到了 Terminal 字体，⽽且接下来我们还会使⽤ Lobster 字体，所以⽤这⾏代码添加引⽤。
1、指定 headng, select 宽度并指定其⽔平居中。
2、修改 heading 的宽度，主要是为了让其宽度⼤于 select 的宽度，显得更加美观。然后指定其上外边距和下外边距。
3、设置 heading 下 h2 元素的字体和字体⼤⼩，颜⾊。
CSS Code复制内容到剪贴板
1. .select > p, .select ul {
2. background-color: #ffffff;
3. font-size: 2rem;
4. border: 1px solid bisque;
5. border-radius: 5px;
6. margin-bottom: 0;
7. }
8.
9. .select > p {
10. text-align: left;
11. padding: 1rem;
12. position: relative;
13. border-bottom-rightright-radius: 0;
14. border-bottom-left-radius: 0;
15. cursor: pointer;
16. color: rgba(102, 102, 102, .6);
17. }
18. .select > p:after {
19. display: block;
20. width: 10px;
21. height: 10px;
22. content: '';
23. position: absolute;
24. top: 1.4rem;
25. rightright: 2rem;
26. border-bottom: 1px solid #33CC66;
27. border-left: 1px solid #33CC66;
28. transform: rotate(-45deg);
29. transition: transform .3s ease-out, top .2s ease-out;
30. }
1、设置 p 和 ul 元素的背景颜⾊和边框等设置。
2、为 p 元素单独指定样式，并设置其 position 属性，主要是为了下⾯绘制右侧的下拉按钮。
3、利⽤ :after 在p 元素的右⽅绘制下拉按钮，可以看出来，我们是利⽤左下边框然后旋转 -45 度模拟的这个效果。值得注意的是，我们需要将其 display 设置为 block，并且设置宽⾼，否则看不到这个效果。
CSS Code复制内容到剪贴板
1. .select ul {
2. margin-top: 0;
3. border-top-left-radius: 0;
4. border-top-rightright-radius: 0;
5. list-style-type: none;
6. cursor: pointer;
7. overflow-y: auto;
8. max-height: 0;
9. transition: max-height .3s ease-out;
10. }
11.
12. .select ul li {
13. padding-left: 0.5rem;
14. display: block;
15. line-height: 3rem;
16. text-align: left;
17. }
1、设置 ul 的⼀些默认属性，并将其设置最⼤宽度为 0，指定 overflow-y 为 auto ，这个时候ul 将会被隐藏。
2、在这⾥设置的时候我遇到了⼀个问题，就是 li 标签始终占不满 ul 的⼀⾏，那是因为其默认有 margin 和 padding ，所以在⼀开始的时候就将⽹页中所有元素的外边距和内边距设置成了 0。
CSS Code复制内容到剪贴板
1. .select.open ul {
2. max-height: 20rem;
3. transform-origin: 50% 0;
4. -webkit-animation: slide-down .5s ease-in;
5. }
6.
7. .select.open > p:after {
8. position: absolute;
9. top: 1.6rem;
10. transform: rotate(-225deg);
11. transition: transform .3s ease-in, top .2s ease-in;
12. }
1、为 open 设置最⼤⾼度，并为其指定动画效果。
2、将下拉按钮旋转 -225 度，并为其指定动画。
下⾯我们看看为 ul 元素指定的 slide-down 动画效果，这也是这个下拉特效的关键所在。
CSS Code复制内容到剪贴板
1. @-webkit-keyframes slide-down {
2. 0% {
3. transform: scale(1, 0);
4. }
5. 25% {
6. transform: scale(1, 1.25);
7. }
8. 50% {
9. transform: scale(1, 0.75);
10. }
11. 75% {
12. transform: scale(1, 1.1);
13. }
14. 100% {
15. transform: scale(1, 1);
16. }
17. }
看到以上代码可能就都明⽩了，就是不断改变 ul 的⼤⼩，让其在 0.75-1.25 之间进⾏缩放，所以就会有那个跳动的效果了。下⾯还有⼀些简单的 CSS 代码，不再解释。
CSS Code复制内容到剪贴板
1. .select ul li:hover {
2. background-color: rgba(102, 153, 102, 0.4);
3. }
4.
5. .select .selected {
6. background-color: rgba(102, 153, 102, 0.8);
7. }
CSS 讲完了，下⾯就可以看看我们是如何利⽤ JQuery 控制这个效果的。
我们并不需要下载 JQuery 就可以使⽤，因为现在已经有很多⽹站提供了 CDN 服务，⽐如我使⽤的 BootCDN。
XML/HTML Code复制内容到剪贴板
1. <script src="cdn.bootcss/jquery/3.1.1/jquery.min.js"></script>
下⾯就可以使⽤ JQuery 了。
XML/HTML Code复制内容到剪贴板
1. <script>
2. $(document).ready(function () {
3. $('.select ul li').on("click", function (e) {
4. var _this = $(this);
5. $('.select >p').text(_this.attr('data-value'));
6. $(_this).addClass('selected').siblings().removeClass('selected');
7. $('.select').toggleClass('open');
8. cancelBubble(e);
9. });
10.
11. $('.select>p').on("click", function (e) {
12. $('.select').toggleClass('open');
13. cancelBubble(e);
14. });
html特效代码银河系下载15.
16. $(document).on('click', function () {
17. $('.select').removeClass('open');
18. })
19. })
20.
21. function cancelBubble(event) {
22. if (event.stopPropagation) {
23. event.preventDefault();
24. event.stopPropagation();
25. } else {
26. urnValue = false;
27. event.cancelBubble();
28. }
29. }
30. </script>
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() ⽅法。
总结
好了，本⽂的内容到这就基本介绍了，希望能对⼤家的学习或者⼯作带来⼀定的帮助，如果有疑问⼤家可以留⾔交流。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论