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: 0; margin: 0; } .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: 0; list-style-type: none; background-color: #ffffff; overflow-y: auto; position: absolute; top: 40px; left: 0; -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: 0; margin: 0; } .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: 0; 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: 0; list-style-type: none; background-color: #ffffff; position: absolute; top: 20px; left: 0; z-index: 1; 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: 0; -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: 1; -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与案例一相同
