css+div实现简洁tab选项卡效果代码
代码语言:html
所属分类:选项卡
代码描述:css+div实现简洁tab选项卡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://use.typekit.net/ovt6ynt.css"); @import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Oswald:wght@200;300;400;500;600;700&family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@100;300;400;500;700;900&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&family=Spectral:wght@200;300;400;500;600;700;800&display=swap"); body { padding: 0; margin: 0; height: 100%; font-family: "Roboto", sans-serif; background: linear-gradient(#141e30, #243b55); } .title { text-align: center; padding: 50px 0px 25px 0; font-size: 44px; font-weight: 600; color: #21222c; font-family: 'Playfair Display SC'; } .wrapper { background-color: #f6f8ff; width: 100%; min-height: 100vh; background: transparent; opacity: 1; } .wrapper.pre { background-size: cover !important; position: absolute; top: 0; z-index: -2; opacity: 0.75; background: url(//repo.bfw.wiki/bfwrepo/image/643b76c263dfd.png); } .wrapper .line { width: 50%; margin: 25px auto 0 auto; height: 1px; background-color: #c3d2e3; } h2.tab-title { font-weight: 300; } h2.tab-title.tab-primary { color: #636983; } h2.tab-title.tab-success { color: #51a14c; } h2.tab-title.tab-default { color: #525252; } h2.tab-title.tab-warning { color: #b12222; } .container { width: 100%; padding: 10px 0; text-align: center; } .container .card { max-width: 600px; min-height: 140px; background-color: white; border-radius: 10px; border: 1px solid #e3e3e3; margin: 0 auto; } .tabs { text-align: left; position: relative; } .tabs input { position: absolute; opacity: 0; margin: 0; padding: 0; } .tabs input + label { font-weight: 300; color: #666; margin: 10px 0; width: 110px; cursor: pointer; display: inline-block; transition: all 0.3s; text-align: center; font-size: 12px; border: none; } .tabs input + label:hover { color: #777; } .tabs .tabsShadow { width: 100%; padding: 10px; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.04); box-sizing: border-box; position: absolute; height: 35px; z-index: 0; top: 0; pointer-events: none; } .content { margin: 0px auto; text-align: left; color: #666; font-size: 13px; line-height: 20px; position: relative; height: 220px; background: hsl(232deg 16% 15%); } .content .item { opacity: 0; visibility: hidden; transition: all 0.3s; position: absolute; padding: 10px 20px; } .content p { margin: 10px 0; } .glider { width: 110px; height: 3px; background: linear-gradient(90deg, #5b3cc4 0%, #3c6cc4 100%); border-radius: 3px; position: absolute; box-shadow: 0px 0px 8px 0px rgba(91, 60, 196, 0.4); transition: all 0.3s; } #tab-1:checked ~ .glider { left: 0px; } #tab-2:checked + label { color: #51a14c; } #tab-2:checked ~ .glider { background: linear-gradient(90deg, #51a14c 0%, #10c33e 100%); box-shadow: 0px 0px 8px 0px rgba(47, 187, 12, 0.62); } #tab-2:checked ~ .glider { left: 113px; } #tab-3:checked + label { color: #525252; } #tab-3:checked ~ .glider { background: linear-gradient(90deg, #4a4a4a 0%, #9b9b9b 100%); } #tab-3:checked ~ .glider { left: 226px; } #tab-4:checked + label { color: #b12222; } #tab-4:checked ~ .glider { background: linear-gradient(90deg, #b93232 0%, #ff5d5d 100%); box-shadow: 0px 0px 8px 0px rgba(231, 13, 93, 0.57); } #tab-4:checked ~ .glider { left: 339px; } #tab-1:checked ~ section #content-1, #tab-2:checked ~ section #content-2, #tab-3:checked ~ section #content-3, #tab-4:checked ~ section #content-4 { opacity: 1; visibility: visible; } @media (max-width: 700px) { .tabs input + label, .glider { width: 70px; } #tab-1:checked ~ .glider { left: 0px; } #tab-2:checked ~ .glider { left: 73px; } #tab-3:checked ~ .glider { left: 146px; } #tab-4:checked ~ .glider { left: 219px; } } .tabs input + label { margin: 12px -8px; width: 15%; transition: all 0.3s; text-align: center; border: none; border-bottom: 0.5pt solid #1d1e22; color: #e7e9f5; display: inline-flex; -webkit-box-pack: center; padding: 5pt 10pt; vertical-align: top; justify-content: flex-start; background: #333; box-shadow: 1px 1px 2px 1px #231f20; font-family: "antique-olive-condensed"; text-transform: uppercase; font-weight: 300; font-size: 8pt; background: #26292C; margin-bottom: 0.5px; border-radius: 7px 7px 0 0 !important; border-top: 1px solid #3B3D3F; letter-spacing: .1666666667em !important; font-family: 'antique-olive' !important; background: hsl(232deg 6% 17%); } .content { margin: 0px auto; text-align: left; color: #666; font-size: 13px; line-height: 20px; position: relative; height: 240px; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 3px rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 10%); display: block; padding: 1.25rem; z-index: 2; background: #26292C; border-top: 1px solid #3B3D3F; background: hsl(232deg 16% 15%); } .container .card { max-width: 600px; min-height: 140px; border-radius: 10px; border: none; margin: 0 auto; z-index: 4 !important; position: relative; background: linear-gradient(#141e30, #243b55); background: #16181A; border-top: 1px solid #3B3D3F; background: hsl(232deg 18% 8%); } p { font-family: muli, sans-serif; font-family: stix-two-text, serif; font-family: source-serif-pro, serif; } .content p { margin: 10px 15px 10px 0; font-family: "muli"; letter-spacing: 0.75px; font-size: 14pt; font-style: normal; color: #f0f2fc; line-height: 30px; margin-top: 10pt; font-family: "freight-display-pro"; font-weight: 300 !important; } h2.tab-title.tab-warning, h2.tab-title.tab-success, h2.tab-title.tab-primary, h2.tab-title.tab-default { font-family: "freight-display-pro"; display: inline-flex; color: #fff; background: linear-gradient(55deg, #f37 0%, #f93 80%); background-position: bottom center; marg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0