CSS3叉號按鈕效果詳解

admin發表於2017-10-27
CSSS3

本章節分享一段程式碼例項，它實現了圓形的按鈕。

裡面有一個叉號，自然代表關閉或者的刪除功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.close {
  position: relative;
  display:block;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 25px;
  background: black;
  opacity: 0.5;
}
.close:hover {
  cursor: pointer;
  opacity: 1;
}
.close::before, .close::after {
  content: '';
  position: absolute;
  width: 80%;
  top: 50%;
  left: 10%;
  height: 12px;
  margin-top: -6px;
  border-radius: 5px;
  background: #ffffff;
}
.close::before {
  transform: rotate(45deg);
}
.close::after {
  transform: rotate(-45deg);
}
</style>
</head>
<body>
<span class="close"></span>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.close {
  position: relative;
  display:block;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 25px;
  background: black;
  opacity: 0.5;
}

上面的程式碼設定圓形的元素。

將其設定為相對定位，是為了作為裡面新增的兩個絕對定位的偽物件的定位參考。

display:block是為了將span元素轉換為塊級元素，這樣就可以設定它的尺寸了。

border-radius: 25px，設定元素的圓角半徑為25px，那麼這個元素就呈現為圓形。

opacity: 0.5預設情況下是半透明的。

[CSS] 純文字檢視 複製程式碼
.close:hover {
  cursor: pointer;
  opacity: 1;
}

當滑鼠懸浮按鈕，滑鼠指標變為小手形狀，也變為不透明。

[CSS] 純文字檢視 複製程式碼
.close::before, .close::after {
  content: '';
  position: absolute;
  width: 80%;
  top: 50%;
  left: 10%;
  height: 12px;
  margin-top: -6px;
  border-radius: 5px;
  background: #ffffff;
}

使用偽物件選擇器，為元素內部新增兩個偽元素。

然後設定偽元素的尺寸、圓角和定位等樣式。

[CSS] 純文字檢視 複製程式碼
.close::before {
  transform: rotate(45deg);
}
.close::after {
  transform: rotate(-45deg);
}

設定兩個偽物件的旋轉角度，這樣就形成一個叉號。

二.相關閱讀:

（1）.border-radius參閱CSS3 border-radius一章節。

（2）.opacity參閱CSS opacity屬性一章節。

（3）.::before參閱CSS E:before/E::before一章節。

（4）.transform參閱CSS3 transform屬性一章節。

相關文章