成人精品一区二区三区四,国产性色播播毛片,亚洲欧美一区二区三区久久

技術(shù)頻道 - html技術(shù)

CSS關(guān)閉按鈕圖標(biāo)（X）

作者:admin 時間:2021-8-13 9:14:41 瀏覽:

關(guān)閉圖標(biāo)不用小圖片，只用CSS，就能輕松實現(xiàn)。本文將給大家介紹如何用CSS來實現(xiàn)一個關(guān)閉按鈕圖標(biāo)（X），代碼其實非常簡單。

CSS關(guān)閉按鈕圖標(biāo)（X）

實例介紹

關(guān)閉按鈕圖標(biāo)（X）位于區(qū)域右上角。

使用了一個鼠標(biāo)懸停效果，默認(rèn)顏色透明度為0.3，當(dāng)鼠標(biāo)移上去后，透明度為1。

完整HTML代碼

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  
  <title>Pure CSS Cross/Close Icon, </title>
  
  
<style>

.close {
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  float: right;
  position: relative;
  right: 20px;
  top: 5px;
  content: ' ';
  height: 20px;
  width: 1px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

.container {
  width: 500px;
  height: 200px;
  margin:30px 20px;
  background-color: #f1f1f1;
}

</style>

 
</head>

<body translate="no" >

<div class="container">
  <a href="#" class="close">
</div>
 
</body>

</html>

execcode getcode

代碼解釋

按鈕顏色、大小、位置均可通過CSS修改，非常方便。

.close:before, .close:after {
  float: right;
  position: relative;
  right: 20px;
  top: 5px;
  content: ' ';
  height: 20px;
  width: 1px;
  background-color: #333;
}

HTML中，class="container" 的 div 是關(guān)閉按鈕（X）的相對區(qū)域。

實例中并無加入點擊按鈕的事件，實例主要給大家呈現(xiàn)如何用純CSS來實現(xiàn)一個關(guān)閉按鈕圖標(biāo)（X）。