css+svg实现底部tab导航条切换选项卡显示卡片列表数据效果代码
代码语言:html
所属分类:选项卡
代码描述:css+svg实现底部tab导航条切换选项卡显示卡片列表数据效果代码
代码标签: css svg 底部 tab 导航条 切换 选项卡 显示 卡片 列表
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap'); :root { --icon: #fff; --dark: #1e1f26; --tran: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s; --font: 'Lato', Arial, Helvetica, serif; } body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; margin: 0; font-family: var(--font); background-color: #7f5a83; background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%); } .content { height: 350px; display: flex; justify-content: center; align-items: center; position: relative; width: 350px; background: linear-gradient(0deg, #fff6, #fff2, #fff2); border-radius: 5px; max-height: 96vh; } nav.bar { display: flex; justify-content: center; align-items: flex-end; width: calc(100% - 30px); height: 65px; bottom: 10px; position: absolute; } nav.bar:before, nav.bar:after { content: ""; width: 6px; height: 65px; background: var(--dark); position: absolute; left: -5px; bottom: 0; border-radius: 5px 0 0 5px; } nav.bar:after { left: inherit; right: -5px; border-radius: 0 5px 5px 0; } input { display: none; } label { text-decoration: none; text-transform: uppercase; font-size: 10px; width: 50px; height: 50px; text-align: center; display: inline-grid; color: var(--dark); position: relative; transition: var(--tran); cursor: pointer; align-items: end; background-repeat: no-repeat; background-size: 25px 25px; background-position: 12px 10px; bottom: 7px; margin: 0 10px; z-index: 4; } label:hover { color: #fff; height: 55px; } input:checked + label { height: 70px; padding-bottom: 10px; } .selector { width: 100%; height: 90px; position: absolute; bottom: 0; left: 0; z-index: 0; transition: var(--tran); overflow: hidden; } .selector:before { content: ""; background: radial-gradient(circle at 50% 0%, #fff0 25px, var(--dark) 26px 100%), radial-gradient(circle at 50% 25px, var(--dark) 0 20px, #fff0 21px 100%), radial-gradient(circle at calc(50% + 0px) 23px, #0009 15px, #fff0 23px 100%), radial-gradient(circle at calc(50% - 0px) 30px, #fff8 15px, #fff0 23px 100%); width: 200%; height: 100%; position: absolute; bottom: 0; left: 0; z-index: -1; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s; background-repeat: no-repeat; background-size: 100% 65px, 100% 100%, 100% 100%, 100% 100%; background-position: 0 100%, 0 0, 0 0, 0 0; } #m-search:checked ~ .selector:before { left: calc(-50% - 105px); } #m-popular:checked ~ .selector:before { left: calc(-50% - 36px ); } #m-forked:checked ~ .selector:before { left: calc(-50% + 34px ); } #m-loved:checked ~ .selector:before { left: calc(-50% + 105px); } /*** Icons ***/ label:before, label:after { content: ""; position: absolute; box-sizing: border-box; transition: all 0.5s ease 0s; } /*** Search ***/ label[for=m-search]:before { width: 16px; height: 16px; left: 12px; top: 11px; border: 3px solid var(--icon); border-radius: 100%; transition: var(--tran); } label[for=m-search]:after { width: 11px; height: 4px; left: 28px; top: 24px; transition: var(--tran); background: var(--icon); transform-origin: left top; transform: rotate(45deg); border-radius: 0 5px 5px 0; } /*** Popular ***/ label[for=m-popular]:before { width: 26px; height: 26px; left: 11px; top: 10px; transition: var(--tran); border-radius: 1px; background: var(--icon); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } /*** Forked ***/ label[for=m-forked]:before { width: 25px; height: 25px; left: 12px; top: 10px; z-index: 1; border-radius: 0; transition: var(--tran); background: conic-gradient(from 90deg at 0 0, var(--icon) 0 25%, #fff0 0 100%), radial-gradient(#fff0 1px, var(--icon) 2px 3px, #fff0 4px 100% ), radial-gradient(#fff0 1px, var(--icon) 2px 3px, #fff0 4px 100% ), radial-gradient(#fff0 1px, var(--icon) 2px 3px, #fff0 4px 100% ); background-repeat: no-repeat; background-size: 2px 13px, 12px 12px, 12px 12px, 12px 12px; background-position: 4px 6px, -1px -2px, -1px 15px, 13px -1px; } label[for=m-forked]:after { width: 15px; height: 10px; left: 17px; top: 17px; z-index: 0; transition: var(--tran); transition-property: --icon !important; border-right: 2px solid var(--icon); border-bottom: 2px solid var(--icon); border-radius: 0 0 10px 0; } /*** Loved ***/ label[for=m-loved]:before { width: 22px; height: 22px; left: 10px; top: 0px; transition: var(--tran); background: radial-gradient(circle at 7px 7px, var(--icon) 0 6px, #fff0 7px 100%), radial-gradient(circle at 15px 15px, var(--icon) 0 6px, #fff0 7px 100%), linear-gradient(45deg, var(--icon) 0 15px, #fff0 0 100%); border-radius: 8px 0px 8px 3px; transform: rotate(-45deg); transform-origin: center right; } input:checked + label { color: var(--sel); --icon: var(--sel); } input:checked + label[for=m-popular], input#m-popular:checked ~ .result { --sel: #39a1f4; } input:checked + label[for=m-search], input#m-search:checked ~ .result { --sel: #f48d4e; } input:checked + label[for=m-forked], input#m-forked:checked ~ .result { --sel: #84a91c; } input:checked + label[for=m-loved], input#m-loved:checked ~ .result { --sel: #ff6275; } /*** RESULT ***/ .result { width: calc(100% + 10px); height: 230px; bottom: 100px; position: absolute; border-radius: 5px; z-index: 0; max-height: 230px; transition: max-height 0.5s ease 0s; overflow: hidden; } .result > div { height: 100%; max-height: 0px; overflow: hidden; transition: var(--tran); } .result > div h3 { color: var(--sel); font-weight: 500; background-color: var(--dark); margin: 0; padding: 10px; border-radius: 5px; font-size: 20px; padding-left: 45px; position: relative; transition: var(--tran); } .result label { position: absolute; left: 0; top: 0; margin: 0; cursor: default; } .r-search label { --icon: #f48d4e; } .r-popular label { --icon: #39a1f4; } .r-forked label { --icon: #84a91c; } .r-loved label { --icon: #ff6275; } input#m-search:checked ~ .result { animation: show-panel-1 1s ease 0s; } input#m-popular:checked ~ .result { animation: show-panel-2 1s ease 0s; } input#m-forked:checked ~ .result { animation: show-panel-3 1s ease 0s; } input#m-loved:checked ~ .result { animation: show-panel-4 1s ease 0s; } @keyframes show-panel-1 { 0%, 100% { max-height: 230px; } 40%, 60% { max-height: 0px; opacity: 0; } } @keyframes show-panel-2 { 0%, 100% { max-height: 230px; } 40%, 60% { max-height: 0px; opacity: 0; } } @keyframes show-panel-3 { 0%, 100% { max-height: 230px; } 40%, 60% { max-height: 0px; opacity: 0; } } @keyframes show-panel-4 { 0%, 100% { max-height: 230px; } 40%, 60% { max-height: 0px; opacity: 0; } } input#m-search:checked ~ .result .r-search, input#m-popular:checked ~ .result .r-popular, input#m-forked:checked ~ .result .r-forked, input#m-loved:checked ~ .result .r-loved { max-height: 230px; transition: var(--tran); } /*** Pens ***/ .pens { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); grid-auto-rows: minmax(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0