用纯CSS实现优雅的tab页_html/css_WEB-ITnose

<div class="container">  <div class="tab-wrapper">    <!--tab section 1-->    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-1" checked>    <label for="tab-radio-1" class="tab-handler tab-handler-1">水浒传</label>    <div class="tab-content tab-content-1">《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说，以宋江领导的起义军为主要题材，通过一系列梁山英雄反抗压迫、英勇斗争的生动故事，暴露了北宋末年统治阶级的腐朽和残暴，揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。按120回本计，前70回讲述各个好汉上梁山，后50回主要为宋江全伙受招安为朝廷效力，以及被奸臣所害。</div>    <!--tab section 2-->    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-2">    <label for="tab-radio-2" class="tab-handler tab-handler-2">三国演义</label>    <div class="tab-content tab-content-2">《三国演义》是中国古典四大名著之一，全名为《三国志通俗演义》。作者是元末明初小说家罗贯中，是中国第一部长篇章回体历史演义小说。描写了从东汉末年到西晋初年之间近105年的历史风云。全书反映了三国时代的政治军事斗争，反映了三国时代各类社会矛盾的转化，并概括了这一时代的历史巨变，塑造了一批叱咤风云的三国英雄人物。</div>    <!--tab section 3-->    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-3">    <label for="tab-radio-3" class="tab-handler tab-handler-3">西游记</label>    <div class="tab-content tab-content-3">《西游记》是中国古典四大名著之一，是由明代小说家吴承恩所创作的中国古代第一部浪漫主义的长篇神魔小说。主要描写了唐朝太宗贞观年间孙悟空、猪八戒、沙僧、白龙马四弟子保护唐僧西行取经，沿途历经九九八十一难，一路降妖伏魔，化险为夷，最后到达西天，取得真经的故事。取材于《大唐三藏取经诗话》和汉族民间传说。 [1] </div>    <!--tab section 4-->    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-4">    <label for="tab-radio-4" class="tab-handler tab-handler-4">红楼梦</label>    <div class="tab-content tab-content-4">《红楼梦》，中国古典四大名著之首，清代作家曹雪芹创作的章回体长篇小说[1] 。早期仅有前八十回抄本流传，八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。程伟元邀请高鹗协同整理出版百二十回全本[2] ，定名《红楼梦》。亦有版本作《金玉缘》。</div>  </div></div>

html,body{  height: 100%;  margin: 0;  padding: 0;  background-color: #58596b;}.container{  width: 800px;  height: 400px;  margin: 100px auto;  background-color: #fff;  box-shadow: 0 1px 3px rgba(0,0,0,.1);}.tab-wrapper{  position: relative;  width: 800px;  height: 60px;  background-color: #33344a;}.tab-wrapper .tab-radio{  display: none;}.tab-handler{  position: relative;  z-index: 2;  display: block;  float: left;  height: 60px;  padding: 0 40px;  color: #717181;  font-size: 16px;  line-height: 60px;  transition: .3s;  transform: scale(.9);}.tab-radio:checked + .tab-handler{  color: #fff;  background-color: #e74c3c;  transform: scale(1);}.tab-radio:checked + .tab-handler + .tab-content{  visibility: visible;  opacity: 1;  transform: scale(1);}.tab-wrapper .tab-content{  visibility: hidden;  position: absolute;  top: 60px;  left: 0;  width: 740px;  padding: 30px;  color: #999;  font-size: 14px;  line-height: 1.618em;  background-color: #fff;  opacity: 0;  transition: transform .5s, opacity .7s;  transform: translateY(20px);}