纯css实现一个tab选项卡切换效果代码
代码语言:html
所属分类:选项卡
代码描述:纯css实现一个tab选项卡切换效果代码,没有使用js代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); /* ################################################# This is part of the UI framework being developed. ################################################# */ body { padding: 0; margin: 0; height: 100%; font-family: "Roboto", sans-serif; } .title { text-align: center; padding: 40px 0; font-size: 40px; font-weight: 300; color: #636983; } .wrapper { background-color: #F6F8FF; width: 100%; min-height: 100vh; } .wrapper .line { width: 50%; margin: 50px 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; } .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, #ta.........完整代码请登录后点击上方下载按钮下载查看
网友评论0