本例中包含两个下拉选择框的动画示例，本例中并未使用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>
