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 () { $. ...
随机推荐
- March 11 2017 Week 10 Saturday
Wisdom outweighs any wealth. 智慧比财富更有价值. Wisdom can create wealth if used in proper ways, it can help ...
- 从产品展示页面谈谈Hybris系列之二: DTO, Converter和Populator
文章作者:张健(Zhang Jonathan) 上一篇文章 从产品展示页面谈谈Hybris的特有概念和设计结构 我们讲解了Hybris一些特有的概念以及大体架构,并且介绍了Facade层里是如何定义D ...
- linux下时间同步的两种方法分享（转）
与一个已知的时间服务器同步 代码如下: ntpdate time.nist.gov 其中 time.nist.gov 是一个时间服务器. 删除本地时间并设置时区为上海 复制代码 代码如下: rm -r ...
- 【洛谷2709】小B的询问（莫队模板题）
点此看题面 大致题意: 有一个长度为\(N\)的序列,每个数字在\(1\sim K\)之间,有\(M\)个询问,每个询问给你一个区间,让你求出\(\sum_{i=1}^K c(i)^2\),其中\(c ...
- ACM-ICPC 2018 徐州赛区网络预赛 A.Hard to prepare 【规律递推】
任意门:https://nanti.jisuanke.com/t/31453 A.Hard to prepare After Incident, a feast is usually held in ...
- 【luogu P3384 树链剖分】 模板
题目链接:https://www.luogu.org/problemnew/show/P3384 诶又给自己留了个坑..不想写线段树一大理由之前的模板变量名太长 #include <cstdio ...
- Android学习笔记_38_图片的拖动、缩放功能和多点触摸
一.基础知识: 引用 理论上 Android可以处理 多达256 个手指的触摸,大概只有章鱼哥能享受这种技术带来的便利.就编程人员来说,编写多点触摸和单点触摸的方式几乎一模一样.其奥秘在于Motion ...
- Spring MVC之@RequestBody, @ResponseBody 详解（转）
简介: @RequestBody 作用: i) 该注解用于读取Request请求的body部分数据,使用系统默认配置的HttpMessageConverter进行解析,然后把相应的数据绑定到要返回的对 ...
- Python常用模块之time和datetime
1.时间的格式化 结构化时间 ##把字符串时间转换成结构化时间 time.strptime("2017-06-21","%Y-%m-%d") ##把结构化时间转 ...
- iOS-GCD使用详解
前言 对初学者来说,GCD似乎是一道迈不过去的坎,很多人在同步.异步.串行.并行和死锁这几个名词的漩涡中渐渐放弃治疗.本文将使用图文表并茂的方式给大家形象地解释其中的原理和规律. 线程.任务和队列的概 ...