jquery创意下拉多选框效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery创意下拉多选框效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        @font-face {
                font-family:'Roboto';
                font-style:normal;
                font-weight:100;
                src:url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1MmgVxIIzc.ttf) format('truetype')
        }
        @font-face {
                font-family:'Roboto';
                font-style:normal;
                font-weight:300;
                src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc9.ttf) format('truetype')
        }
        @font-face {
                font-family:'Roboto';
                font-style:normal;
                font-weight:400;
                src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype')
        }
        @font-face {
                font-family:'Roboto';
                font-style:normal;
                font-weight:700;
                src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype')
        }
        @font-face {
                font-family:'Roboto';
                font-style:normal;
                font-weight:900;
                src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfBBc9.ttf) format('truetype')
        }
        body {
                font-family:'Roboto';
                padding:0;
                margin:0;
                background:linear-gradient(-45deg,#183850 0,#183850 25%,#192c46 50%,#22254c 75%,#22254c 100%);
                background-repeat:no-repeat;
                background-attachment:fixed;
                margin-top:100px;
                margin-left:20px;
                color:#ecf0f1
        }
        .container {
                margin:0 auto;
                display:table
        }
        .selectionator {
                position:relative;
                border-radius:2px;
                background-color:#2c3e50;
                color:#95a5a6;
                perspective:800px;
                width:200px
        }
        .selectionator .search {
                position:relative;
                display:block;
                border:0;
                width:100%;
                padding:1em;
                outline:0;
                color:#FFF;
                background-color:#16a085;
                box-sizing:border-box;
                transform-style:preserve-3d;
                transform-origin:50% 0;
                transition:transform .3s;
                border-radius:2px;
                z-index:99
        }
        .selectionator .search .overlay {
                width:100%;
                background-color:#f00;
                height:100%;
                position:absolute;
                left:0;
                top:0;
                background:linear-gradient(to bottom,rgba(0,0,0,0.35) 0,rgba(0,0,0,0.1) 100%);
                opacity:0
        }
        .selectionator .search .shadow {
                position:absolute;
                height:15px;
                width:100%;
                left:0;
                bottom:-15px;
                transform-origin:center bottom;
                transform:scale(0.95,1) translate3d(0,0px,0);
                background:linear-gradient(to bottom,rgba(0,0,0,0.75) 0,rgba(0,0,0,0) 100%);
                opacity:0
        }
        .selectionator .search:before {
                content:"\f078";
                display:inline-block;
                font-family:FontAwesome;
                font-style:normal;
                font-weight:normal;
                line-height:1.5;
                float:right;
                vertical-align:middle
        }
        .selectionator:hover .search,.selectionator.opened .search {
                transform:rotate3d(1,0,0,60deg)
        }
        .selectionator:hover .search .overlay,.selectionator.opened .search .overlay,.selectionator:hover .search .shadow,.selectionator.opened .search .shadow {
                opacity:1
        }
        .selectionator:hover .menu,.selectionator.opened .menu {
                height:200px;
                opacity:1
        }
        .selectionator .menu {
                overflow:hidden;
                position:absolute;
                width:100%;
                top:50%;
                height:0;
                border-radius:0;
                background-color:#2c3e50;
                transition:all .3s ease;
                opacity:0;
                border:1px solid #16a085;
                border-top:0
        }
        .selectionator ul.list {
                list-style:none;
                padding:0;
                margin:0;
                overflow:hidden;
                overflow-y:scroll;
                height:0;
                -webkit-backface-visibility:hidden;
                backface-visibility:hidden;
                transition:all .3s ease;
                opacity:.75;
                width:100%;
                height:100%
        }
        .selectionator ul.list>li span.header {
                display:block;
                padding:6px;
                background-color:#34495e;
                font-weight:200;
                color:#fff
        }
        .selectionator ul.optgroup {
                list-style:none;
                padding:0;
                margin:0;
                -webkit-touch-callout:none;
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
   .........完整代码请登录后点击上方下载按钮下载查看