CSS3 Write tab Toggle

Transferred from: http://code.hcharts.cn/about.html
1<! DOCTYPE html>234<meta charset= "Utf-8" >5<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >6<meta name= "viewport" content= "initial-scale=1, maximum-scale=1, minimum-scale=1, User-scalable=no" >7<title>title</title>8<meta name= "description" content= "" >9<meta name= "keywords" content= "" >Ten<style type= "Text/css" > One*, *:after, *:before{box-sizing:border-box;-webkit-box-sizing:border-box;} A . wrapper{width:80em;margin:0px Auto} -. tabs-section [type= "Radio"]{display:none;} -. tabs-section [Type= "Radio"] + label{display:inline-block; Position:relative;color: #777;p adding:. 5em 1em; left:6px;} the. tabs-section [Type= "Radio"] + label:after{background-color: #fff; border:1px solid #999; border-bottom:none; display: Block Width:100%;height:100%;content: "; Position:absolute; Top:0px;border-radius:. 5em. 5em 0 0; Transform:perspective (100px) Rotatex (30deg); background-color: #f0f0f0; left:0px} -  -. tabs-section [type= "Radio"]:checked + label:after{background-color: #fff; z-index:4} -  +. tabs-section [Type= "Radio"] + label span{position:relative; cursor:pointer; z-index:5} -. tabs-section [type= "Radio"]:checked +label span{} +  A. tabs-content{border:1px solid #999; border-top:none; height:32em; position:relative; overflow:hidden; box-shadow:0-1 PX 0 #222; border-radius:0 0. 2em. 2em} at. tabs-section section{z-index:0; position:absolute; height:100%; transition:all. 4s ease; top:0px;left:0px; width:10 0%; padding:2em; visibility:hidden;} -  -  -. tabs-section [type= "Radio"]:nth-of-type (1): Checked ~. Tabs-content Section:nth-child (1) {visibility:visible;} -. tabs-section [type= "Radio"]:nth-of-type (2): Checked ~. Tabs-content Section:nth-child (2) {visibility:visible;} -. tabs-section [type= "Radio"]:nth-of-type (3): checked ~. Tabs-content Section:nth-child (3) {visibility:visible;} in. tabs-section [type= "Radio"]:nth-of-type (4): checked ~. Tabs-content Section:nth-child (4) {visibility:visible;} -</style> to +<body> -  the<div class= "wrapper" > *<div class= "Tabs-section" > $<div class= "Tabs-wrapper" >Panax Notoginseng<input type= "Radio" name= "tab" id= "About" checked= "checked"/> -<label for= "About" ><span>About</span> the</label> +<input type= "Radio" name= "tab" id= "Usage"/> A<label for= "Usage" ><span>how to use</span> the</label> +<input type= "Radio" name= "tab" id= "CDN"/> -<label for= "CDN" ><span>cdn files</span> $</label> $<input type= "Radio" name= "tab" id= "Changelog"/> -<label for= "Changelog" ><span>change log</span> -</label> the  -<div class= "Tabs-content" >Wuyi<section>About</section> the<section>how to Use</section> -<section>cdn files</section> Wu<section>change log</section> -</div> About</div> $</div> -  -</div> -</body> A

CSS3 Write tab Toggle