jquery创意下拉多选框效果代码
代码语言: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; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0