css3实现下拉选择框特效

<pre name="code" class="html">    <style>
        body,ul, p{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: greenyellow;
            color: black;
        }
        .content{
            padding-top: 5%;
        }
        .content .select{
            width: 300px;
            height: 40px;
            margin: 0 auto;
            background-color: #fff;
            line-height: 40px;
            position: relative;
        }
        .content .select:after{
            content:'';
            display: block;
            width: 10px;
            height: 10px;
            border-left: 1px solid #000;
            border-bottom:1px solid #000;
            position: absolute;
            top:11px;
            right: 12px;
            transform:rotate(-45deg);
            transition:transform .3s ease-out, top .3s ease-out;
        }
        .content .select p{
            padding: 0 15px;
            cursor: pointer;
           line-height: 40px;
        }
        .content .select ul{
            width: 100%;
            list-style-type: none;
            background-color: #ffffff;
            overflow-y: auto;
            position: absolute;
            top: 40px;
            left: 0;
            max-height: 0;
            transition:max-height .3s ease-out;

        }
        .content .select ul li{
            padding: 0 15px;

        }
        .content .select ul li.selected{
            background-color: cadetblue;
        }
        .content  .select ul li:hover{
            background-color: #9e9e9e;
            cursor: pointer;


        }
        .content .select.open:after{
            transform:rotate(-225deg);
            top: 18px;

        }
        .content .select.open ul{
            max-height: 250px;
            -webkit-animation:slide-down .5s ease-in;
            transiton:max-height .2s ease-out;
            transform-origin:50% 0;
        }
        @-webkit-keyframes slide-down{
            0%{transform:scale(1,0)}
            25%{transform:scale(1,1.2)}
            50%{transform:scale(1,0.85)}
            75%{transform:scale(1,1.05)}
            100%{transform:scale(1,1)}
        }
    </style>

<div class="content">
    <div class="select">
        <p>所有选择</p>
        <ul>
            <li data-value="所有选择" class="selected">所有选择</li>
            <li data-value="html">html</li>
            <li data-value="css">css</li>
            <li data-value="jQuery">jQuery</li>
        </ul>
    </div>
</div>

<span style="font-family: Arial, Helvetica, sans-serif;"><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></span>

<script>
    $(function () {
        $(".select > p ").on("click",function(e){
            $(".select").toggleClass('open');
            e.stopPropagation()
        })
        $(".select ul li").on("click",function(e){
            var _this = $(this);
            $(".select > p").text(_this.attr("data-value"));  //".select > p"   选择 select 的子元素
            _this.addClass("selected").siblings().removeClass('selected'); //siblings() 选择兄弟节点
            $(".select").removeClass("open");
            e.stopPropagation()
        })
        $(document).on("click",function(){
            $(".select").removeClass("open");
        })
    })
</script>