css叉號關閉按鈕效果

antzone發表於2017-12-02
CSS

本章節分享一段程式碼例項，它利用CSS3實現了叉號功能。

實現對勾效果可以參閱CSS3對勾效果詳解一章節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style>
* {
  margin:0px;
  padding:0px;
}
div{ 
  margin:100px;
  width: 20px;
  height:5px; 
  background: red;
  transform: rotate(45deg);
}
div:after{
  content:'';
  display:block;
  width: 20px;
  height:5px; 
  background: red;
  transform: rotate(-90deg);
}
</style>
</head>
<body>
<div></div> 
</body>  
</html>

上面程式碼實現了預期效果，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
* {
  margin:0px;
  padding:0px;
}

簡單的初始化處理，將所有元素的內邊距和外邊距設定為0。

[CSS] 純文字檢視 複製程式碼
div{ 
  margin:100px;
  width: 20px;
  height:5px; 
  background: red;
  transform: rotate(45deg);
}

將div元素的寬度設定為20px，高度5px，背景色為紅色。

最後將其旋轉45度，這樣就有了一個傾斜的橫線。

a:3:{s:3:\"pic\";s:43:\"portal/201712/02/213704za2afaao77t7tft0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[CSS] 純文字檢視 複製程式碼
div:after{
  content:'';
  display:block;
  width: 20px;
  height:5px; 
  background: red;
  transform: rotate(-90deg);
}

通過偽元素選擇器新增一個元素。

尺寸和它的父div元素相同，背景色也是相同，在旋轉之前，它兩個是重疊的。

最後旋轉-90度，就實現了叉號效果。

二.相關閱讀:

（1）.transform參閱CSS3 transform一章節。

（2）.::after參閱CSS E:after/E::after一章節。

相關文章