Introduction （前言）
現如今，各種前端框架盛行的時代，單純的完成一些介面上的功能已經越來越方便了。然而，過多的使用了這些框架而不去多研究想想這類框架的具體實現，只是會用是不能迅速提高自己個人能力的，相反，用多了有時候會遮蔽自己的視野，無法完成自己的知識體系升級。今天，我就準備講講CSS能夠做的一些功能互動，這些功能或許你之前第一時間想到的可能是用js，殊不知強大的CSS也能完成，希望通過我的分享能夠增加你的知識視野。
1 tabs（標籤頁）
1.1 敲重點
- 相同
name屬性的radio組一次性只能選擇一個，模擬皮膚切換 - 利用
radio具有可聚焦屬性，模擬點選事件 - 通過
CSS派生選擇器，結合z-index層級來完成內容顯隱切換
1.2 關鍵程式碼
<div class="tab">
<input type="radio" id="radio1" name="radiogroup"/>
<label for="radio1">標籤1</label>
<section>內容1</section>
</div>
<div class="tab">
<input type="radio" id="radio2" name="radiogroup"/>
<label for="radio2">標籤2</label>
<section>內容2</section>
</div>
複製程式碼#radio1:checked ~ label,#radio2:checked ~ label,#radio3:checked ~ label{
background:#e67e22;
}
#radio1:checked ~ section,#radio2:checked ~ section,#radio3:checked ~ section{
z-index:1
}
複製程式碼2 collapse（摺疊皮膚）
1.1 敲重點
- 利用
checkbox多選特性，模擬同時事件聚焦 - 利用
checkbox具有可聚焦屬性，模擬點選事件 - 通過
CSS派生選擇器來變換內容高度完成面版摺疊效果
1.2 關鍵程式碼
<input type="checkbox" id="checkbox1" class="checkbox-common"/>
<label for="checkbox1" class="panel-title">皮膚1</label>
<section class="panel-content" id="content1">內容1</section>
複製程式碼#checkbox1:checked ~ #content1,#checkbox2:checked ~ #content2,#checkbox3:checked ~ #content3{
height:100px;
}
複製程式碼3 dialog（模態框）
3.1 敲重點
- 通過a標籤瞄點定位元素，
href和id一致，模擬點選 - 通過
:target選擇器定位模態元素，切換顯隱
3.2 關鍵程式碼
<a href="#dialog" class="dialog-btn">click me</a>
<div class="dialog-box" id="dialog">
<div class="dialog-con">
<a href="#" class="dialog-close">X</a>
content
</div>
</div>
複製程式碼.dialog-box:target{
visibility:visible
}
複製程式碼4 lightBox（圖片預覽）
4.1 敲重點
- 通過a標籤瞄點定位元素，
href和id一致，模擬點選 - 通過
:target選擇器定位大圖顯示
4.2 關鍵程式碼
<div class="light-box">
<a href="#img1"><img src="https://si.geilicdn.com/img-5cea0000016b6d86be730a217252-unadjust_900_383.png?w=100&h=100" alt=""></a>
<a href="#" id="img1" class="lightbox">
<img src="https://si.geilicdn.com/img-5cea0000016b6d86be730a217252-unadjust_900_383.png" alt="">
</a>
</div>
複製程式碼.lightbox{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,1);
right:0;
bottom:0;
text-align:center;
display:none;
z-index:999;
}
.lightbox:target{
display:block;
}
複製程式碼5 tooltip（文字提示）
5.1 敲重點
- 利用
html自定義屬性data-attr來儲存提示內容 - 通過
attr(data-attr)來獲得提示內容並通過hover來顯示文字提示
5.2 關鍵程式碼
<p class="poem">晝短<span data-tip="痛苦難熬的夜晚" class="tooltip" href="" tabindex="0">苦夜</span>長，何不<span href=""class="tooltip" data-tip="一起夜晚遊玩" tabindex="0">秉夜</span>遊</p>
複製程式碼.tooltip:before{
content:attr(data-tip);
position:absolute;
left:50%;
bottom:120%;
display:block;
padding:.5em;
width:150px;
transform:translateX(-50%);
background:#7d5fff;
color:#fff;
opacity:0;
text-align:center;
outline:none;
}
複製程式碼6 indicator （閱讀進度）
6.1 敲重點
- body設定一個對角線的漸變背景
- 在body上覆蓋一個背景為白色的遮蓋層，露出頂部一點點用來顯示進度
6.2 關鍵程式碼
body{
background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
background-size: 100% calc(100% - 100vh + 129px);
background-repeat: no-repeat;
}
複製程式碼7 總結（Summary）
看完上述例子，是不是對CSS的強大有了一層更深的認識？希望在留言分享你的CSS一些特殊有用技巧，大家一起學習。
參考連結：