一款纯css3实现的tab选项卡的实列教程

　　今天给大家带来一款纯css3实现的tab选项卡。单击左侧的选项的时候，右侧内容以动画的形式展示。效果图如下：

　　实现的代码。

　　html代码：

1. <div class="night-tabs night-tabs-color-default night-tabs-animation-slide-right night-tabs-position-vleft">  
2.         <!--Tab 1-->  
3.         <input type="radio" name="night-tabs" checked="" id="tab1" class="content1">  
4.         <!--Checked= Tab shown-->  
5.         <label for="tab1">  
6.             <!--Modify icon and name-->  
7.             <span><span><em class="fa fa-home"></em>Night Tabs</span></span>  
8.         </label>  
9.         <!--Tab 2-->  
10.         <input type="radio" name="night-tabs" id="tab2" class="content2">  
11.         <label for="tab2">  
12.             <!--Modify icon and name-->  
13.             <span><span><em class="fa fa-font"></em>Typography</span></span>  
14.         </label>  
15.         <!--Tab 3-->  
16.         <input type="radio" name="night-tabs" id="tab3" class="content3">  
17.         <label for="tab3">  
18.             <!--Modify icon and name-->  
19.             <span><span><em class="fa fa-list"></em