css+js实现中性tab选项卡效果代码
代码语言:html
所属分类:选项卡
代码描述:css+js实现中性tab选项卡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> */ @import url(https://fonts.googleapis.com/css?family=Nunito+Sans); /* RESET */ * { box-sizing: border-box; margin: 0; padding: 0; } /* STYLING */ .container { display: flex; height: 100vh; background-color: #f4f4f4; color: #a2a2a2; font-family: "Nunito Sans", Arial, Helvetica, sans-serif; } .darkmode .container { background-color: #1A1B1F; color: #8a8a8a; } .tabs-container { width: 540px; max-width: 620px; min-width: 420px; margin: auto; } /* Style the tabs */ .tabs { margin-bottom: 28px; display: flex; justify-content: space-between; } .tabs a { cursor: pointer; padding: 12px 24px; width: 120px; text-align: center; font-weight: bold; border-radius: 18px; transition: background 0.1s, color 0.1s; background: linear-gradient(145deg, #ffffff, #dcdcdc); box-shadow: 3px 3px 5px #bebebe, -3px -3px 5px #ffffff; } .darkmode .tabs a { background: linear-gradient(145deg, #1c1d21, #17181c); box-shadow: 3px 3px 6px #101114, -3px -3px 6px #24252a; } /* Change background color of tabs on hover */ .tabs a:hover { background: linear-gradient(145deg, #f4f4f4, #cecece); color: #888; } .darkmode .tabs a:hover { background: #141414; color: #bbb; } /* Styling for active tab */ .tabs a.active { background-color: #f4f4f4; color: #bdbdbd; cursor: default; padding: 14px 22px 10px 26px; background: #f4f4f4; box-shadow: inset 3px 3px 5px #cbcbcb, inset -3px -3px 5px #ffffff; } .darkmode .tabs a.active { background: #1A1B1F; box-shadow: inset 3px 3px 6px #101114, inset -3px -3px 6px #24252a; color: #6a6a6a; } /* Style the tab content */ .tabcontent { padding: 46px; min-height: 288px; display: none; border-radius: 18px; background: #f4f4f4; box-shadow: 3px 3px 6px #bebebe, -3px -3px 6px #ffffff; } .darkmode .tabcontent { background: linear-gradient(145deg, #1c1d21, #17181c); box-shadow: 3px 3px 6px #101114, -3px -3px 6px #24252a; } .content .active { display: block; } .tabcontent p { margin-bottom: 12px; } .tabcontent p:last-child { margin-bottom: 0; } .tabcontent .read-more-link a { color: #626262; text-decoration: none; font-size: 0.85em; font-weight: bold; } .darkmode .tabcontent .read-more-link a { color: #d4d4d4; } .icon { padding-left: 8px; font-size: 16px; } /* THE DARKMODE SWITCH */ .dark-mode-switch { position: absolute; top: 16px; right: 16px; } .dark-mode-switch .switch { /* margin-left: 4px; */ } .switch-label { cursor: pointer; font-size: 0.85em; } /* the box around the slider */ .switch { position: relative; display: inline-block; width: 44px; height: 22px; margin-left: 4px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #1A1B1F; transition: .2s; box-shadow: 2px 2px 3px #ffffff, -2px -2px 3px #bebebe; } .darkmode .slider { box-shadow: 2px 2px 3px #34353a, -2px -2px 3px #000104; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 2px; background: #9294b8; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #f4f4f4; } input:checked + .slider:before { transform: translateX(21px); } /* Rounded sliders */ .slider.round { border-radius: 11px; } .slider.round:before { border-radius: 50%; } /*==============================*/ .small-screen { display: none; background-color: #f4f4f4; height: 100vh; color: #a2a2a2; font-family: "Nunito Sans", Arial, Helvetica, sans-serif; } .darkmode .small-screen { background-color: #1A1B1F; color: #8a8a8a; } .small-screen-content { width: 70%; margin: auto; } @media only screen and (max-width: 600px) { .container { display: none; } .small-screen { display: flex; } .tabcontent { display: block; } } </style> </head> <body> <div id="container" class="container"> <div id="tabs" class="tabs-container"> <div class="tabs"> <a id="tab1" data-tab="1" class="tab">Mercury</a> <a id="tab2" data-tab="2" class="tab">Venus</a> <a id="tab3" data-tab="3" class="tab">Earth</a> <a id="tab4" data-tab="4" class="tab">Mars</a> </div>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0