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;
   .........完整代码请登录后点击上方下载按钮下载查看