CSS的一些你可能不知道的強大技巧

Introduction (前言)

現現在,各類前端框架盛行的時代,單純的完成一些界面上的功能已經愈來愈方便了。然而,過多的使用了這些框架而不去多研究想一想這類框架的具體實現,只是會用是不能迅速提升本身我的能力的,相反,用多了有時候會遮蔽本身的視野,沒法完成本身的知識體系升級。今天,我就準備講講CSS可以作的一些功能交互,這些功能或許你以前第一時間想到的多是用js,卻不知強大的CSS也能完成,但願經過個人分享可以增長你的知識視野。css

1 tabs(標籤頁)

在線演示html

1.1 敲重點

  1. 相同name屬性的radio組一次性只能選擇一個,模擬面板切換
  2. 利用radio具備可聚焦屬性,模擬點擊事件
  3. 經過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 敲重點

  1. 利用checkbox多選特性,模擬同時事件聚焦
  2. 利用checkbox具備可聚焦屬性,模擬點擊事件
  3. 經過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 敲重點

  1. 經過a標籤瞄點定位元素,hrefid一致,模擬點擊
  2. 經過: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 敲重點

  1. 經過a標籤瞄點定位元素,hrefid一致,模擬點擊
  2. 經過: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 敲重點

  1. 利用html自定義屬性data-attr來存儲提示內容
  2. 經過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 (閱讀進度)

在線演示ui

6.1 敲重點

  1. body設置一個對角線的漸變背景
  2. 在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一些特殊有用技巧,你們一塊兒學習。spa

參考連接:3d

相關文章
相關標籤/搜索