css实现一个折叠手风琴式筛选过滤选项菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现一个折叠手风琴式筛选过滤选项菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> body { background-color: #e0eafd; } .filter { width: 220px; margin: 20px auto; font-family: 'Whitney', sans-serif; } .filter p { padding: 0 10px; } .filter p, .filter li { font-weight: bold; line-height: 35px; font-size: 12px; } .filter .title { color: #fff; background-color: #1ba0eb; -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px; border-radius: 3px 3px 0 0; } .filter .title_items { color: #94a4c3; cursor: pointer; position: relative; background-color: #fff; border-bottom: 1px solid #e4effd; -moz-transition: linear 0.2s background-color; -o-transition: linear 0.2s background-color; -webkit-transition: linear 0.2s background-color; transition: linear 0.2s background-color; } .filter .title_items:hover { background-color: #f4f4f4; } .filter .title_items.active + ul + .title_items { border-top: 1px solid #e4effd; } .filter .title_items.active:after { height: 5px; width: 5px; right: 14px; margin-top: -2.5px; } .filter .title_items:before, .filter .title_items:after { content: ""; position: absolute; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-color: #c3d0e8; -moz-transition: linear 0.3s all; -o-transition: linear 0.3s all; -webkit-transition: linear 0.3s all; transition: linear 0.3s all; } .filter .title_items:before { height: 5px; width: 13px; top: 50%; right: 10px; margin-top: -2.5px; } .filter .title_items:after { height: 13px; width: 5px; top: 50%; right: 14px; margin-top: -6.5px; } .filter ul { -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .filter ul li { height: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; color: #92a5bf; background-color: #f5f8fe; -moz-transition: linear 0.2s all; -o-transition: linear 0.2s all; -webkit-transition: linear 0.2s all; transition: linear 0.2s all; } .filter ul li:nth-child(odd) { -moz-transform: scale(0.5) translateX(-150px); -ms-transform: scale(0.5) translateX(-150px); -webkit-transform: scale(0.5) translateX(-150px); transform: scale(0.5) translateX(-150px); } .filter ul li:nth-child(even) { -moz-transform: scale(0.5) translateX(150px); -ms-transform: scale(0.5) translateX(150px); -webkit-transform: scale(0.5) translateX(150px); transform: scale(0.5) translateX(150px); } .filter ul li.visible { height: 36px; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } .filter ul li:last-child label { border-bottom: none; } .filter ul li:nth-child(1) label:before, .filter ul li:nth-child(1) label:after { border-color: #5db6e2; } .filter ul li:nth-child(2) label:before, .filter ul li:nth-child(2) label:after { border-color: #c0a2f1; } .filter ul li:nth-child(3) label:before, .filter ul li:nth-child(3) label:after { border-color: #f7a238; } .filter ul li:nth-child(4) label:before, .filter ul li:nth-child(4) label:after { border-color: #f6d04d; } .filter ul li:nth-child(5) label:before, .filter ul li:nth-child(5) label:after { border-color: #40c9a1; } .filter ul li:nth-child(6) label:before, .filter ul li:nth-child(6) label:after { border-color: #ea8b8b; } .filter ul li:nth-child(7) label:before, .filter ul li:nth-child(7) label:after { border-color: #fe8ae0; } .filter ul li:nth-child(8) label:before, .filter ul li:nth-child(8) label:after { border-color: #abb6d2; } .filter input[type="radio"] { display: none; } .filter input[type="radio"]:checked + label:after { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } .filter label { margin: 0 15px; display: block; cursor: pointer; position: relative; padding: 0 10px 0 25px; border-bottom: 1px solid #ddebfd; } .filter label:before { content: ""; height: 10px; width: 10px; top: 50%; left: 0; margin-top: -9px; position: absolute; border-width: 3px; border-style: solid; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0