您的位置：首页 > Web前端 > CSS

CSS 关闭按钮实现

2017-07-29 20:11 211 查看

参考文献

css 关闭按钮实现

在参考文献的基础上进行改进

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
/*关闭图标*/
.close {
position: relative;
margin: 3px;
width: 24px;
height: 24px;
background: white;
cursor: pointer;
box-sizing: border-box;
}
.close:hover::before, .close:hover::after {
background: red;
}
.close:before {
position: absolute;
content: '';
width: 1px;
height: 25px;
background: #666666;
transform: rotate(45deg);
top: -3px;
left: 11px;
}
.close:after{
content: '';
position: absolute;
width: 1px;
height: 25px;
background: #666666;
transform: rotate(-45deg);
top: -3px;
left: 11px;
}
</style>

<title>Insert title here</title>
</head>
<body>
<div class="close"></div>
</body>
</html>

效果

鼠标不在它上面时

鼠标在它上面时

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航