井井客

搜索

CSS3实现酷炫的下拉框特效

虽然说是CSS3实现酷炫的下拉框特效,但实际还是需要配合一些JQ代码,核心是CSS3动画@keyframes,其它就是拼拼凑凑了。

CSS3实现酷炫的下拉框特效

先上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3实现酷炫的下拉框特效</title>
<style>body,ul,li,p { padding: 0; margin: 0;}
body { background-color: #3c6; font-family: arial;}
.select { width: 60%; margin: 50px auto 0;}
/*仿select-val-option,P标签展示选中值,ul标签展示下拉列表*/
.select p, .select ul { font-size: 2rem; border-radius: 5px; border: 1px solid bisque; margin-bottom: 0; background-color: #fff; }
.select p { position: relative; padding: 1rem; border-bottom-right-radius: 0; border-bottom-left-radius: 0; cursor: pointer; color: rgba(102, 102, 102, .6);}
.select p:after { display: block; width: 16px; height: 16px; 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;}
.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;}
.select ul li:hover { background-color: rgba(102, 153, 102, 0.4);}
/*展开时样式*/
.select.open p:after { position: absolute; top: 1.6rem; transform: rotate(-225deg); transition: transform .3s ease-in, top .2s ease-in;}
.select.open ul { max-height: 20rem; transform-origin: 50% 0; -webkit-animation: slide-down .5s ease-in;}
/*选中-li样式*/
.select .selected { background-color: rgba(102, 153, 102, 0.8);}
/*CSS3定义-弹下下拉时的动画{兼容没写了}*/
@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);}}
</style>
</head>
<body>
<div class="container">
  <div class="select">
    <p>Please select</p>
    <ul>
      <li data-value="HTML5">HTML5</li>
      <li data-value="CSS3">CSS3</li>
      <li data-value="JavaScript">JavaScript</li>
      <li data-value="JQuery">JQuery</li>
      <li data-value="Backbone">Backbone</li>
    </ul>
  </div>
</div>
<script src="http://www.jingjingke.com/res/js/jquery.min.js"></script> 
<script>  
    $(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();   
        }
    }
</script>
</body>
</html>

看下来可以发现代码中并没有用原生的select标签,而是利用P标签和ul标签一同模似出来,所以li标签中data-value在触发点击事件时将值传递到P标签。

其它代码都还算基础,比较容易理解了~~

文章TAG:CSS3

作者:井井客整理来源:互联网
本文标题:CSS3实现酷炫的下拉框特效
本文链接:http://www.jingjingke.com/c/16190.html

上一篇:jquery触摸屏幕事件
下一篇:纯CSS制作叮当猫

文章分类

相关阅读

随便看看