CSS 下拉框特效_HTML5中国

CSS 下拉框特效_HTML5中国

  想要制作这么一个效果还是比较麻烦的,但是代码并不难理解。首先,来看看 html 代码。

    

        

Custom Select

        

        

Please select

        

登录后复制            HTML5            CSS3            JavaScript            JQuery            Backbone            

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

下面逐步来看 CSS 代码。

   * {        margin: 0;        padding: 0;    }    html {        font-family: 'Terminal';        font-size: 62.5%;    }    body {        background-color: #33CC66;    }

登录后复制

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

立即学习“前端免费学习笔记(深入)”;

  将网页中的默认字体设置为 Terminal,字体大小设置为 62.5%, 也就是 10px。

  设置背景颜色为 #33CC66。

 

登录后复制

  上面我们用到了 Terminal 字体,而且接下来我们还会使用 Lobster 字体,所以用这行代码添加引用。

   .heading, .select {        display: block;        width: 22rem;        margin: 0 auto;        text-align: center;    }    .heading {        width: 28rem;        margin-top: 10rem;        margin-bottom: 2rem;    }    .heading h2 {        font-size: 6rem;        font-family: 'Lobster';        color: #ffffff;    }

登录后复制

  指定 headng, select 宽度并指定其水平居中。

  修改 heading 的宽度,主要是为了让其宽度大于 select 的宽度,显得更加美观。然后指定其上外边距和下外边距。

  设置 heading 下 h2 元素的字体和字体大小,颜色。

.select > p, .select ul {        background-color: #ffffff;        font-size: 2rem;        border: 1px solid bisque;        border-radius: 5px;        margin-bottom: 0;    }.select > p {        text-align: left;        padding: 1rem;        position: relative;        border-bottom-right-radius: 0;        border-bottom-left-radius: 0;        cursor: pointer;        color: rgba(102, 102, 102, .6);    }.select > p:after {        display: block;        width: 10px;        height: 10px;        content: '';        position: absolute;        top: 1.4rem;        right: 2rem;        border-bottom: 1px solid #33CC66;        border-left: 1px solid #33CC66;        transform: rotate(-45deg);        transition: transform .3s ease-out, top .2s ease-out;    }

登录后复制

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

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

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

.select ul {        margin-top: 0;        border-top-left-radius: 0;        border-top-right-radius: 0;        list-style-type: none;        cursor: pointer;        overflow-y: auto;        max-height: 0;        transition: max-height .3s ease-out;    }    .select ul li {        padding-left: 0.5rem;        display: block;        line-height: 3rem;        text-align: left;    }

登录后复制

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

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

    .select.open ul {        max-height: 20rem;        transform-origin: 50% 0;        -webkit-animation: slide-down .5s ease-in;    }    .select.open > p:after {        position: absolute;        top: 1.6rem;        transform: rotate(-225deg);        transition: transform .3s ease-in, top .2s ease-in;    }

登录后复制

  为 open 设置最大高度,并为其指定动画效果。

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

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

   @-webkit-keyframes slide-down {        0% {            transform: scale(1, 0);        }        25% {            transform: scale(1, 1.25);        }        50% {            transform: scale(1, 0.75);        }        75% {            transform: scale(1, 1.1);        }        100% {            transform: scale(1, 1);        }    }

登录后复制

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

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

   .select ul li:hover {        background-color: rgba(102, 153, 102, 0.4);    }    .select .selected {        background-color: rgba(102, 153, 102, 0.8);    }

登录后复制

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

  我们并不需要下载 JQuery 就可以使用,因为现在已经有很多网站提供了 CDN 服务,比如我使用的 BootCDN。


登录后复制

  下面就可以使用 JQuery 了。

    $(document).ready(function () {        $('.select ul li').on("click", function (e) {            var _this = $(this);            $('.select >p').text(_this.attr('data-value'));            $(_this).addClass('selected').siblings().removeClass('selected');            $('.select').toggleClass('open');            cancelBubble(e);        });        $('.select>p').on("click", function (e) {            $('.select').toggleClass('open');            cancelBubble(e);        });        $(document).on('click', function () {            $('.select').removeClass('open');        })    })    function cancelBubble(event) {        if (event.stopPropagation) {            event.preventDefault();            event.stopPropagation();        } else {            event.returnValue = false;            event.cancelBubble();        }    }

登录后复制

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

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

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

以上就是CSS 下拉框特效_HTML5中国的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2902460.html

(0)
上一篇 2025年3月11日 01:36:15
下一篇 2025年3月11日 01:36:26

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • H5你真的了解吗?(绝对干货)

         h5广告,包括广告的设计流程,究竟有什么讲究,和阶段。为了能帮助更多的人了解h5广告,我专门做了一个讲义。同时,也让我意外的收到了非常好反馈和认!这是对我的极大鼓励!我的讲义内容仍然还有不少不完善和有待系统的内容。但是,我相信你在…

    2025年3月29日 编程技术
    100
  • 混合移动开发框架详解

      kerkee是一个多主体共存型hybrid框架,具有跨平台、用户体验好、性能高、扩展性好、灵活性强、易维护、规范化、集成云服务、具有debug环境、彻底解决跨域问题。 hybrid   kerkee框架的诞生背景   Hybrid Ap…

    编程技术 2025年3月29日
    200
  • 基于javascript的组件开发方式

      作为一名前端工程师,写组件的能力至关重要。虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力下,渐渐的也摸索了一套组件的编写方式。   下面我们来谈谈,在现有的知识体系下,如何很好的写组件。   比如我们要…

    编程技术 2025年3月29日
    100
  • 从登录框看前端

      我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机。本文将以一个小小的登陆框为入口,谈一谈如何完善自己的程序。   在很多人眼里,前端就是 DIV+CS…

    编程技术 2025年3月29日
    100
  • 如何适配不同分辨率和不同屏幕尺寸的手机

      背景   开发移动端H5页面   面对不同分辨率的手机   面对不同屏幕尺寸的手机   视觉稿   在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。   对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以…

    2025年3月29日 编程技术
    200
  • React Native第一课

         前言   本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用。如果你现在还不太了解React Native是什么以及Facebook为什么要创建React Native,你可以先看看这篇博客。   阅读本文…

    2025年3月29日 编程技术
    200
  • 三天学会HTML5 ——多媒体元素的使用

      目录   1. HTML5 Media-Video   2. HTML5 Media-Audio   3. 拖拽操作   4. 获取位置信息 立即学习“前端免费学习笔记(深入)”;   5. 使用Google 地图获取位置信息   多媒…

    2025年3月29日 编程技术
    200
  • 基于轻量级高性能的CSS3动画库

      简要教程   Repaintless.css是一款轻量级高性能的CSS3动画库。Repaintless.css通过特殊的方法来制作元素动画,不会引起页面的重绘,使它比其它CSS3库具有更高的性能。 CSS3   安装   你可以通过bo…

    编程技术 2025年3月29日
    100
  • HTML5实现的震撼3D焦点图动画

      这是一款基于html5和jquery的3d焦点图动画,焦点图中的图片利用了css3的相关特性实现图片倾斜效果,从而让图片出现3d的视觉效果。这款html5焦点图不仅可以手动点击按钮切换图片,而且还支持自动切换图片,使用起来也相当方便。如…

    2025年3月29日 编程技术
    200

发表回复

登录后才能评论