繼上一篇文章后，突發(fā)奇想利用純粹的css3和radio的特性來打造一個選項卡切換的效果

普通的選項卡效果一般分為html+css+js來制作

步驟如下：

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

純css3怎么解決呢？

1. html利用radio放到label中，將其隱藏（display：none），然后用input:checked~[label里的所要修飾的標簽]
2. css修飾相關(guān)樣式，利用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>超級文本標記語言是標準通用標記語言下的一個應用，也是一種規(guī)范，一種標準，超文本標記語言超文本標記語言(16張)它通過標記符號來標記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標記符解釋和顯示其標記的內(nèi)容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。</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)是一種用來表現(xiàn)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一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。</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的感覺是不是很爽！！！
歡迎大家對我的分享進行評論，指正
另，歡迎關(guān)注我的微信公眾號：峰來風趣 觀看更多精彩內(nèi)容

demo在這