电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

如何利用CSS技术发挥作用下拉框酷炫的特效

2021-01-27 23:05:03 出处:[ 菜菜电脑网 ] 人气:次阅读
这篇文章给大家概述的是一个利用CSS付诸的酷炫的下拉框,付诸后效果真的非常优异,文中注意到了详实意味着过程和示例代码,感兴趣的朋友们下面来一起到底吧。

首先来到底要构建的效果图

就让制作这么一个效果还是比较麻烦的,但是代码并不难理解。

首先,来到底 Html 代码。


XML/HTML Code遗传物质内容到剪贴板

  1. <p class="container">

  2. <p class="heading">

  3. <h2>Custom Select</h2>

  4. </p>


  5. <p class="select">

  6. <p>Please select</p>

  7. <ul>

  8. <li data-value="HTML5">HTML5</li>

  9. <li data-value="CSS3">CSS3</li>

  10. <li data-value="JavaScript">JavaScript</li>

  11. <li data-value="JQuery">JQuery</li>

  12. <li data-value="Backbone">Backbone</li>

  13. </ul>

  14. </p>

  15. </p>

可见,我们并不会利用原生的 select 元素,而是利用其它元素来精心设计这个效果。我们为 li 元素选定了 data-value,主要是接下来我们才会用 JQuery 赚取换到值并将其放于到 p 元素下。

下面逐步来看 CSS 代码。


CSS Code副本内容到剪贴板

  1. * {

  2. margin: 0;

  3. padding: 0;

  4. }

  5. html {

  6. font-family: 'Terminal';

  7. font-size: 62.5%;

  8. }

  9. body {

  10. background-color: #33CC66;

  11. }

1、将网页中所有元素的外边距和内边距设置为 0。

2、将网页中的选项字体设置为 Terminal,字体大小设置为 62.5%, 也就是 10px。

3、设置背景颜色为 #33CC66。


XML/HTML Code激活内容到剪贴板

  1. <link href='http://fonts.googleapis.com/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. .select > p {

  9. text-align: left;

  10. padding: 1rem;

  11. position: relative;

  12. border-bottom-rightright-radius: 0;

  13. border-bottom-left-radius: 0;

  14. cursor: pointer;

  15. color: rgba(102, 102, 102, .6);

  16. }

  17. .select > p:after {

  18. display: block;

  19. width: 10px;

  20. height: 10px;

  21. content: '';

  22. position: absolute;

  23. top: 1.4rem;

  24. rightright: 2rem;

  25. border-bottom: 1px solid #33CC66;

  26. border-left: 1px solid #33CC66;

  27. transform: rotate(-45deg);

  28. transition: transform .3s ease-out, top .2s ease-out;

  29. }

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. .select ul li {

  12. padding-left: 0.5rem;

  13. display: block;

  14. line-height: 3rem;

  15. text-align: left;

  16. }

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. .select.open > p:after {

  7. position: absolute;

  8. top: 1.6rem;

  9. transform: rotate(-225deg);

  10. transition: transform .3s ease-in, top .2s ease-in;

  11. }

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. .select .selected {

  5. background-color: rgba(102, 153, 102, 0.8);

  6. }

CSS 话说完了,下面就可以想到我们是如何利用 JQuery 压制这个效果的。

我们并不需要浏览 JQuery 就可以运用于,因为现在已经有很多网站提供者了 CDN 服务,比如我用到的 BootCDN。


XML/HTML Code拷贝内容到剪贴板

  1. <script src="http://cdn.bootcss.com/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. $('.select>p').on("click", function (e) {

  11. $('.select').toggleClass('open');

  12. cancelBubble(e);

  13. });

  14. $(document).on('click', function () {

  15. $('.select').removeClass('open');

  16. })

  17. })

  18. function cancelBubble(event) {

  19. if (event.stopPropagation) {

  20. event.preventDefault();

  21. event.stopPropagation();

  22. } else {

  23. event.returnValue = false;

  24. event.cancelBubble();

  25. }

  26. }

  27. </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() 方法。

总结
好了,本文的内容到这就基本引介了,想要能对大家的努力学习或者工作造就一定的尽力,如果有究竟大家可以专页交流。

以上就是如何利用CSS技术充分利用下拉框酷炫的特效的详实内容,更多再三高度重视php中文网其它就其文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152