|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
CSS關閉按鈕圖標（X）
作者:admin 時間:2021-8-13 9:14:41 瀏覽:關閉圖標不用小圖片，只用CSS，就能輕松實現(xiàn)。本文將給大家介紹如何用CSS來實現(xiàn)一個關閉按鈕圖標（X），代碼其實非常簡單。
CSS關閉按鈕圖標（X）
實例介紹
關閉按鈕圖標（X）位于區(qū)域右上角。
使用了一個鼠標懸停效果，默認顏色透明度為0.3，當鼠標移上去后，透明度為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>
代碼解釋
按鈕顏色、大小、位置均可通過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 是關閉按鈕（X）的相對區(qū)域。
實例中并無加入點擊按鈕的事件，實例主要給大家呈現(xiàn)如何用純CSS來實現(xiàn)一個關閉按鈕圖標（X）。
您可能對以下文章也感興趣
相關文章
x
