纯css3制作选项卡

继上一篇文章后，突发奇想利用纯粹的css3和radio的特性来打造一个选项卡切换的效果

普通的选项卡效果一般分为html+css+js来制作

步骤如下：

1. html做布局
2. css做样式
3. js添加切换效果

纯css3怎么解决呢？

1. html利用radio放到label中，将其隐藏（display：none），然后用input:checked~[label里的所要修饰的标签]
2. css修饰相关样式，利用radio特性写样式
3. 就是这么屌，写完了

选项卡功能就这么写完了

好了，废话不说，上代码

html部分:

<section class="box">
    <div class="list box">
        <label for="html" class="text-center">
            <input type="radio" id="html" name="qd" checked />
            <span class="text-center">html</span>
            <p>超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，超文本标记语言超文本标记语言(16张)它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。</p>
        </label>
        <label for="css" class="text-center">
            <input type="radio" id="css" name="qd" />
            <span class="text-center">css</span>
            <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
        </label>
        <label for="js" class="text-center">
            <input type="radio" id="js" name="qd" />
            <span class="text-center">js</span>
            <p>JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</p>
        </label>
    </div>
</section>

css部分:

*{margin:0;padding:0;}
body{background:#fff;font-size:16px;}
.clear{overflow:hidden;}
.fl{float:left;}
.fr{float:right;}
.text-center{text-align:center;}
.box{display:box;display:-webkit-box;}
.center{display:box;display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;}
input{display:none;}
.list{border-bottom:1px solid #1fa7e3;}
label{position:relative;width:1rem;display:block;height:40px;line-height:40px;}
label span{display:block;transition:.3s;-webkit-transition:.3s;box-shadow:inset 0 0 0 #1fa7e3;-webkit-box-shadow:inset 0 0 0 #1fa7e3;}
label p{width:2.8rem;padding:.1rem;font-size:14px;opacity:0;transition:.3s;-webkit-transition:.3s;line-height:20px;text-align:left;z-index:-1;visibility:hidden;position:absolute;left:0;top:40px;}
label:nth-child(2) p{left:-1rem;}
label:nth-child(3) p{left:-2rem;}
input:checked~p{opacity:1;visibility:visible;}
input:checked~span{opacity:1;color:#fff;box-shadow:inset 0 0 100px #1fa7e3;-webkit-box-shadow:inset 0 0 100px #1fa7e3;}

demo效果图

demo效果图

好了，没有写js的感觉是不是很爽！！！
欢迎大家对我的分享进行评论，指正
另，欢迎关注我的微信公众号：峰来风趣 观看更多精彩内容

demo在这