博客

CSS 关闭按钮实现

  • Post author:
  • Post category:其他



参考文献



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>


效果


鼠标不在它上面时


鼠标在它上面时