利用CSS实现酷炫的下拉框特效

    }   
    25% {   
        transform: scale(1, 1.25);   
    }   
    50% {   
        transform: scale(1, 0.75);   
    }   
    75% {   
        transform: scale(1, 1.1);   
    }   
    100% {   
        transform: scale(1, 1);   
    }   
}  

看到以上代码可能就都明白了，就是不断改变 ul 的大小，让其在 0.75-1.25 之间进行缩放，所以就会有那个跳动的效果了。

下面还有一些简单的 CSS 代码，不再解释。

CSS Code复制内容到剪贴板

.select ul li:hover {   
    background-color: rgba(102, 153, 102, 0.4);   
}   
  
.select .selected {   
    background-color: rgba(102, 153, 102, 0.8);   
}  

CSS 讲完了，下面就可以看看我们是如何利用 JQuery 控制这个效果的。

我们并不需要下载 JQuery 就可以使用，因为现在已经有很多网站提供了  CDN 服务，比如我使用的 BootCDN。

XML/HTML Code复制内容到剪贴板

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>  

下面就可以使用 JQuery 了。

XML/HTML Code复制内容到剪贴板

<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);   
        });