CSS3不一样的下拉选择框

本例中包含两个下拉选择框的动画示例，本例中并未使用select标签。本例中第一个案例也可用于标题、导航栏等位置。

案例一：

html布局

<div class="content">

　　<div class="select">

　　　　<p att="select p">所有选项</p>

　　　　<ul att="select ul">

　　　　　　<li data-value="所有选项" class="selected">所有选项</li>

　　　　　　<li data-value="html">html</li>

　　　　　　<li data-value="css">css</li>

　　　　　　<li data-value="javascript">javascript</li>

　　　　　　<li data-value="jQuery">jQuery</li>

　　　　</ul>

　　</div>

</div>

整体显示样式

<style type="text/css">

　　body{
　　　　padding: 0;

　　　　margin: 0;

　　　　background-color: #0099cc;

　　　　color: #333333;

　　}

　　.content{

　　　　padding-top: 5%;

　　}

　　.content .select{

　　　　width: 300px;

　　　　height: 40px;

　　　　margin: 0 auto;

　　　　font-family: "Microsoft Yahei";

　　　　font-size: 16px;

　　　　background-color: #ffffff;

　　　　position: relative;

　　}

</style>

下拉列表样式及动画

[att~=select]{

    padding:;

    margin:;

}

.content .select:after{

    content: "";

    display: block;

    width: 10px;

    height: 10px;

    border-left: 1px #cccccc solid;

    border-bottom: 1px #cccccc solid;

    position: absolute;

    top: 11px;

    right: 12px;

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

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

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

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

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

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

}

.content .select p{

    padding: 0 15px;

    line-height: 40px;

    /*设置光标样式：手型*/

    cursor: pointer;

}

.content .select ul{

    width: 100%;

    /*这样设置相当于隐藏了ul，便实现了下拉样式*/

    max-height:;

    list-style-type: none;

    background-color: #ffffff;

    overflow-y: auto;

    position: absolute;

    top: 40px;

    left:;

    -webkit-transition: max-height .3s ease-in;

    -moz-transition: max-height .3s ease-in;

    -ms-transition: max-height .3s ease-in;

    -o-transition: max-height .3s ease-in;

    transition: max-height .3s ease-in;

}

.content .select ul li{

    padding: 0 15px;

    line-height: 40px;

    cursor: pointer;

}

.content .select ul li:hover{

    background-color: #e0e0e0;

}

.content .select ul li.selected{

    background-color: #3399ff;

    color: #ffffff;

}

@-webkit-keyframes slide-down {

    0%{

        -webkit-transform: scale(1, 0);

        -moz-transform: scale(1, 0);

        -ms-transform: scale(1, 0);

        -o-transform: scale(1, 0);

        transform: scale(1, 0);

    }

    25%{

        -webkit-transform: scale(1, 1.2);

        -moz-transform: scale(1, 1.2);

        -ms-transform: scale(1, 1.2);

        -o-transform: scale(1, 1.2);

        transform: scale(1, 1.2);

    }

    50%{

        -webkit-transform: scale(1, 0.85);

        -moz-transform: scale(1, 0.85);

        -ms-transform: scale(1, 0.85);

        -o-transform: scale(1, 0.85);

        transform: scale(1, 0.85);

    }

    75%{

        -webkit-transform: scale(1, 1.05);

        -moz-transform: scale(1, 1.05);

        -ms-transform: scale(1, 1.05);

        -o-transform: scale(1, 1.05);

        transform: scale(1, 1.05);

    }

    100%{

        -webkit-transform: scale(1, 1);

        -moz-transform: scale(1, 1);

        -ms-transform: scale(1, 1);

        -o-transform: scale(1, 1);

        transform: scale(1, 1);

    }

}

@-moz-keyframes slide-down {

    0%{

        -webkit-transform: scale(1, 0);

        -moz-transform: scale(1, 0);

        -ms-transform: scale(1, 0);

        -o-transform: scale(1, 0);

        transform: scale(1, 0);

    }

    25%{

        -webkit-transform: scale(1, 1.2);

        -moz-transform: scale(1, 1.2);

        -ms-transform: scale(1, 1.2);

        -o-transform: scale(1, 1.2);

        transform: scale(1, 1.2);

    }

    50%{

        -webkit-transform: scale(1, 0.85);

        -moz-transform: scale(1, 0.85);

        -ms-transform: scale(1, 0.85);

        -o-transform: scale(1, 0.85);

        transform: scale(1, 0.85);

    }

    75%{

        -webkit-transform: scale(1, 1.05);

        -moz-transform: scale(1, 1.05);

        -ms-transform: scale(1, 1.05);

        -o-transform: scale(1, 1.05);

        transform: scale(1, 1.05);

    }

    100%{

        -webkit-transform: scale(1, 1);

        -moz-transform: scale(1, 1);

        -ms-transform: scale(1, 1);

        -o-transform: scale(1, 1);

        transform: scale(1, 1);

    }

}

@-o-keyframes slide-down {

    0%{

        -webkit-transform: scale(1, 0);

        -moz-transform: scale(1, 0);

        -ms-transform: scale(1, 0);

        -o-transform: scale(1, 0);

        transform: scale(1, 0);

    }

    25%{

        -webkit-transform: scale(1, 1.2);

        -moz-transform: scale(1, 1.2);

        -ms-transform: scale(1, 1.2);

        -o-transform: scale(1, 1.2);

        transform: scale(1, 1.2);

    }

    50%{

        -webkit-transform: scale(1, 0.85);

        -moz-transform: scale(1, 0.85);

        -ms-transform: scale(1, 0.85);

        -o-transform: scale(1, 0.85);

        transform: scale(1, 0.85);

    }

    75%{

        -webkit-transform: scale(1, 1.05);

        -moz-transform: scale(1, 1.05);

        -ms-transform: scale(1, 1.05);

        -o-transform: scale(1, 1.05);

        transform: scale(1, 1.05);

    }

    100%{

        -webkit-transform: scale(1, 1);

        -moz-transform: scale(1, 1);

        -ms-transform: scale(1, 1);

        -o-transform: scale(1, 1);

        transform: scale(1, 1);

    }

}

@keyframes slide-down {

    0%{

        -webkit-transform: scale(1, 0);

        -moz-transform: scale(1, 0);

        -ms-transform: scale(1, 0);

        -o-transform: scale(1, 0);

        transform: scale(1, 0);

    }

    25%{

        -webkit-transform: scale(1, 1.2);

        -moz-transform: scale(1, 1.2);

        -ms-transform: scale(1, 1.2);

        -o-transform: scale(1, 1.2);

        transform: scale(1, 1.2);

    }

    50%{

        -webkit-transform: scale(1, 0.85);

        -moz-transform: scale(1, 0.85);

        -ms-transform: scale(1, 0.85);

        -o-transform: scale(1, 0.85);

        transform: scale(1, 0.85);

    }

    75%{

        -webkit-transform: scale(1, 1.05);

        -moz-transform: scale(1, 1.05);

        -ms-transform: scale(1, 1.05);

        -o-transform: scale(1, 1.05);

        transform: scale(1, 1.05);

    }

    100%{

        -webkit-transform: scale(1, 1);

        -moz-transform: scale(1, 1);

        -ms-transform: scale(1, 1);

        -o-transform: scale(1, 1);

        transform: scale(1, 1);

    }

}

.content .select.open ul{

    max-height: 250px;

    transform-origin: 50% 0;

    -webkit-animation: slide-down 0.5s ease-in;

    -moz-animation: slide-down 0.5s ease-in;

    -o-animation: slide-down 0.5s ease-in;

    animation: slide-down 0.5s ease-in;

    -webkit-transition: max-height .2s ease-in;

    -moz-transition: max-height .2s ease-in;

    -ms-transition: max-height .2s ease-in;

    -o-transition: max-height .2s ease-in;

    transition: max-height .2s ease-in;

}

.content .select.open:after{

    -webkit-transform: rotate(-225deg);

    -moz-transform: rotate(-225deg);

    -ms-transform: rotate(-225deg);

    -o-transform: rotate(-225deg);

    transform: rotate(-225deg);

    top: 18px;

    -webkit-transition: all .3s ease-in;

    -moz-transition: all .3s ease-in;

    -ms-transition: all .3s ease-in;

    -o-transition: all .3s ease-in;

    transition: all .3s ease-in;

}

使用JavaScript实现点击事件

实现点击事件还需要引用jQuery插件

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

　　$(function(){

　　　　$('.select > p').on('click', function (e) {
　　　　　　// 检查class属性是否有open值，有则删除，没有则添加

　　　　　　$('.select').toggleClass('open');
　　　　　　// 处理冒泡事件

　　　　　　e.stopPropagation();

　　　　});

　　　　$('.select ul li').on('click', function (e) {

　　　　　　var _this = $(this);

　　　　　　$('.select > p').text(_this.attr('data-value'));

　　　　　　_this.addClass('selected').siblings().removeClass('selected');

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

　　　　　　e.stopPropagation();

　　　　});

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

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

　　　　});

　　});

</script>

案例二：

案例二与案例一的html布局相似，只是在p标签后面多了一个i标签，用来显示右侧的三横，如下图

<div class="content">

　　<div class="select">

　　　　<p att="select p">所有选项</p>

　　　　<i></i>

　　　　<ul att="select ul">

　　　　　　<li data-value="所有选项" class="selected">所有选项</li>

　　　　　　<li data-value="html">html</li>

　　　　　　<li data-value="css">css</li>

　　　　　　<li data-value="javascript">javascript</li>

　　　　　　<li data-value="jQuery">jQuery</li>

　　　　</ul>

　　</div>

</div>

css

整体样式与案例一相同

接下来是css样式

[att~=select]{

    padding:;

    margin:;

}

.content .select > i{

    position: absolute;

    top: 12px;

    right: 10px;

    width: 20px;

    height: 12px;

    border-top: 3px #cccccc solid;

    border-bottom: 3px #cccccc solid;

    cursor: pointer;

}

.content .select > i:after{

    content: "";

    position: absolute;

    top: 4px;

    left:;

    width: 100%;

    height: 3px;

    background-color: #cccccc;

}

.content .select p{

    padding: 0 15px;

    line-height: 40px;

    /*设置光标样式：手型*/

    cursor: pointer;

}

.content .select ul{

    width: 100%;

    /*这样设置相当于隐藏了ul，便实现了下拉样式*/

    height:;

    list-style-type: none;

    background-color: #ffffff;

    position: absolute;

    top: 20px;

    left:;

    z-index:;

    overflow: hidden;

    -webkit-transition: top .2s ease, height .2s ease;

    -moz-transition: top .2s ease, height .2s ease;

    -ms-transition: top .2s ease, height .2s ease;

    -o-transition: top .2s ease, height .2s ease;

    transition: top .2s ease, height .2s ease;

}

.content .select ul li{

    padding: 0 15px;

    line-height: 40px;

    cursor: pointer;

    opacity:;

    -webkit-transform: translateX(300px);

    -moz-transform: translateX(300px);

    -ms-transform: translateX(300px);

    -o-transform: translateX(300px);

    transform: translateX(300px);

    -webkit-transition: transform .3s ease;

    -moz-transition: transform .3s ease;

    -ms-transition: transform .3s ease;

    -o-transition: transform .3s ease;

    transition: transform .3s ease;

}

.content .select ul li:hover{

    background-color: #e0e0e0;

}

.content .select ul li.selected{

    background-color: #3399ff;

    color: #ffffff;

}

.content .select.open ul{

    height: 200px;

    transform-origin: 50% 0;

    top: -80px;

    -webkit-transition: all .2s ease;

    -moz-transition: all .2s ease;

    -ms-transition: all .2s ease;

    -o-transition: all .2s ease;

    transition: all .2s ease;

}

.content .select.open ul li{

    opacity:;

    -webkit-transform: translateX(0);

    -moz-transform: translateX(0);

    -ms-transform: translateX(0);

    -o-transform: translateX(0);

    transform: translateX(0);

}

.content .select.open ul li:nth-child(1){

    -webkit-transition: opacity .2s ease .05s, -webkit-transform .3s ease .05s;

    -moz-transition: opacity .2s ease .05s, -moz-transform .3s ease .05s;

    -ms-transition: opacity .2s ease .05s, -ms-transform .3s ease .05s;

    -o-transition: opacity .2s ease .05s, -o-transform .3s ease .05s;

    transition: opacity .2s ease .05s, transform .3s ease .05s;

}

.content .select.open ul li:nth-child(2){

    -webkit-transition: opacity .2s ease .1s, -webkit-transform .3s ease .1s;

    -moz-transition: opacity .2s ease .1s, -moz-transform .3s ease .1s;

    -ms-transition: opacity .2s ease .1s, -ms-transform .3s ease .1s;

    -o-transition: opacity .2s ease .1s, -o-transform .3s ease .1s;

    transition: opacity .2s ease .1s, transform .3s ease .1s;

}

.content .select.open ul li:nth-child(3){

    -webkit-transition: opacity .2s ease .15s, -webkit-transform .3s ease .15s;

    -moz-transition: opacity .2s ease .15s, -moz-transform .3s ease .15s;

    -ms-transition: opacity .2s ease .15s, -ms-transform .3s ease .15s;

    -o-transition: opacity .2s ease .15s, -o-transform .3s ease .15s;

    transition: opacity .2s ease .15s, transform .3s ease .15s;

}

.content .select.open ul li:nth-child(4){

    -webkit-transition: opacity .2s ease .2s, -webkit-transform .3s ease .2s;

    -moz-transition: opacity .2s ease .2s, -moz-transform .3s ease .2s;

    -ms-transition: opacity .2s ease .2s, -ms-transform .3s ease .2s;

    -o-transition: opacity .2s ease .2s, -o-transform .3s ease .2s;

    transition: opacity .2s ease .2s, transform .3s ease .2s;

}

.content .select.open ul li:nth-child(5){

    -webkit-transition: opacity .2s ease .25s, -webkit-transform .3s ease .25s;

    -moz-transition: opacity .2s ease .25s, -moz-transform .3s ease .25s;

    -ms-transition: opacity .2s ease .25s, -ms-transform .3s ease .25s;

    -o-transition: opacity .2s ease .25s, -o-transform .3s ease .25s;

    transition: opacity .2s ease .25s, transform .3s ease .25s;

}

js与案例一相同

CSS3不一样的下拉选择框的更多相关文章

FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
java、easyui-combotree树形下拉选择框
最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用: 首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系) 1.下面我们用hibernate建一下对应的额实体类: ...
HTML、CSS小知识--兼容IE的下拉选择框select
HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...
Bootstrap系列 -- 15. 下拉选择框select
Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...
CSS自定义select下拉选择框(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
ul+jquery自定义下拉选择框
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
背水一战 Windows 10 (105) - 通知（Toast）: 带按钮的 toast, 带输入的 toast（文本输入框，下拉选择框）
[源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...
jQuery插件——下拉选择框
其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...

随机推荐

在Kubernetes上运行SAP UI5应用(上）
2018年只剩最后30天了.Jerry在2017年的最后一天,曾经立下一个目标:这个微信公众号在2018年保证至少每周发布一篇SAP原创技术文章. 从Jerry在后台统计的2018全年文章数量来看,这 ...
一个查看UI5控件所有公有方法的小技巧
一个很小的tip:比如我想把UI5表格控件里的每列设置成宽度根据显示的内容自适应,需要知道应该调用控件的哪个方法来实现. 一种办法当然是查SAP帮助文档,得知需要调用控件的公有方法setAutoSiz ...
python入门14 字典dict
字典dict是无序的key:value格式的数据序列 #coding:utf-8 #/usr/bin/python """ 2018-11-11 dinghanhua 字 ...
PHP处理数组和XML之间的互相转换
PHP将数组转换成XML PHP可以将数组转换成xml格式,简单的办法是遍历数组,然后将数组的key/value转换成xml节点,再直接echo输出了,如: function arrayToXml($ ...
【Linux-CentOS】【转-更正】使用CentOS DVD1 和DVD2做本地yum源
原文在此.此文写的非常好,怕网络丢失,特转来,并做了更正. CentOS6以上版本一般都会提供一个DVD1和一个DVD2镜像,使用DVD1即可安装使用CentOS了,DVD2中存放了一些额外的软件包, ...
Openresty最佳案例 | 第6篇：OpenResty连接Mysql
转载请标明出处: http://blog.csdn.net/forezp/article/details/78616698 本文出自方志朋的博客 centos 安装mysl Centos系统下安装my ...
SpringBoot非官方教程 | 第二篇：Spring Boot配置文件详解
转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot2-config-file/ 本文出自方志朋的博客 ...
小白袍 -- Chapter 1.1 避不开的编解码
1.1 避不开的编解码能阅读本文的想开都是从事计算机开发工作的,那么弱弱的问自己一下,有没有受到过编码的纠缠呢?有没有动过心思,如果没有编码该多好? 1.1.1 这个翻译你得捏着鼻子用要想说明 ...
Javafxml
FXML入门教程本部分教程包括两部分内容: 为什么使用FXML(基本介绍以及用FXML创建用户界面的好处): 使用FXML创建用户界面(通过创建简单登录应用来完成本教程部分). 1.1 为何使用FX ...
Oracle递归 start with...connect by...prior
prior一侧是父节点另一侧是子节点 --查询region_id等于4519的节点下面的所有子节点查找出给定节点的所有子节点 SELECT sr.* FROM spc_region sr wher ...

CSS3不一样的下拉选择框

CSS3不一样的下拉选择框的更多相关文章

随机推荐

热门专题