污视频黄色视频在线观看,国产拍精品系列观看,国模杨依粉嫩蝴蝶150P

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

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

作者:admin 時(shí)間:2021-8-13 9:14:41 瀏覽:

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

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

實(shí)例介紹

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

使用了一個(gè)鼠標(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）的相對(duì)區(qū)域。

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