纯css实现tab选项卡切换效果代码
代码语言:html
所属分类:选项卡
代码描述:纯css实现tab选项卡切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Archivo&display=swap"); * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { padding: 20px; text-align: left; font-family: 'Archivo', sans-serif; color: black; background: #FC00FF; } .centering { margin: auto; position: absolute; width: 23.155em; left: 0; right: 0; top: 10em; bottom: 0; } h1 { font-weight: normal; font-size: 40px; font-weight: normal; text-transform: uppercase; font-family: "Raleway", sans-serif; float: left; margin: 20px 0 100px 10px; } .tabs { width: 23.155em; float: none; list-style: none; position: relative; margin: 80px 0 0 10px; text-align: left; } .tabs li { float: left; display: block; } .tabs input[type="radio"] { display: none; } .tabs label { display: block; padding: 14px 21px; font-size: 20px; font-weight: normal; text-transform: uppercase; border-radius: 14% 53% 0% 100%/20% 0% 91% 0%; background: #00FFFC; color: black; cursor: pointer; position: relative; top: 4px; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tabs label:hover { background: #fffc00; } .tabs .tab-content { z-index: 2; display: none; overflow: hidden; width: 100%; font-size: 17px; line-height: 25px; padding: 25px; position: absolute; top: 53px; left: 0; background: #fffc00; } .tabs [id^="tab"]:checked + label { top: 0; color: black; padding-top: 17px; background: #fffc00; } .tabs [id^="tab"]:checked ~ [id^="tab-content"] { display: block; } </style> </head> <body> <div class="centering"> <ul class="tabs" role="tablist"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1" role="tab" aria-selected="true" aria-controls="panel1" tabindex="0">Thing A</label> <div id="tab-content1" class="tab-content" role="tabpanel" aria-labelledby.........完整代码请登录后点击上方下载按钮下载查看
网友评论0