CSS关闭按钮图标（X）
作者:admin 时间:2021-8-13 9:14:41 浏览:关闭图标不用小图片，只用CSS，就能轻松实现。本文将给大家介绍如何用CSS来实现一个关闭按钮图标（X），代码其实非常简单。
CSS关闭按钮图标（X）
实例介绍
关闭按钮图标（X）位于区域右上角。
使用了一个鼠标悬停效果，默认颜色透明度为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）的相对区域。
实例中并无加入点击按钮的事件，实例主要给大家呈现如何用纯CSS来实现一个关闭按钮图标（X）。
您可能对以下文章也感兴趣
相关文章
x
- 站长推荐
