css实现简洁选项卡切换效果代码
代码语言:html
所属分类:选项卡
代码描述:css实现简洁选项卡切换效果代码,无js代码实现。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing:border-box } body { font-family:"Open Sans"; background:#2c3e50; color:#ecf0f1; line-height:1.618em } .wrapper { max-width:50rem; width:100%; margin:0 auto } .tabs { position:relative; margin:3rem 0; background:#1abc9c; height:14.75rem } .tabs::before,.tabs::after { content:""; display:table } .tabs::after { clear:both } .tab { float:left } .tab-switch { display:none } .tab-label { position:relative; display:block; line-height:2.75em; height:3em; padding:0 1.618em; background:#1abc9c; border-right:.125rem solid #16a085; color:#fff; cursor:pointer; top:0; transition:all .25s } .tab-label:hover { top:-0.25rem; transition:top .25s } .tab-content { height:12rem; position:absolute; z-index:1; top:2.75em; left:0; padding:1.618rem; background:#fff; color:#2c3e50; border-bottom:.25rem solid #bdc3c7; opacity:0; transition:all .35s } .tab-switch:checked+.tab-label { background:#fff; color:#2c3e50; border-bottom:0; border-right:.125rem solid #fff; transition:all .35s; z-index:1; top:-0.0625rem } .tab-switch:checked+label+.tab-content { z-index:2; opacity:1; transition:all .35s } </style> </head> <body> <div class="wrapper"> <div class="tabs"> <div class="tab"><input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch"><label for="tab-1" class="tab-label">Tab One</label> <div class="tab-content">My father had a small estate in Nottinghams.........完整代码请登录后点击上方下载按钮下载查看
网友评论0