<!DOCTYPE html>
<html>	
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob)</title> 
<style> 

 .removes{
	 position:absolute;
	 right:0;
		top:0;
	 color:#999;
	 

	}
.removes::before {
  content: "\2716";
  display: inline-block;
  transition: all 0.4s;
  transform: rotate(0deg);
}

.removes:hover::before {
  color: #2c3e50;
	content:"三";
  

	}
	
	.icon{

width: 50px;

height: 10px;

padding: 10px 0;

border-top: 10px solid #000;

border-bottom: 10px solid #000;

background: #000;

background-clip: content-box;

}

.fa{

cursor: pointer;

width: 50px;

height: 50px;

transition: .3s ease;

}

.fa:hover>.icon{

border: 0;

background: none;

}

.icon:before,.icon:after{

position: absolute;

content: "";

width: 60px;

height: 60px;

transition: .3s ease;

-webkit-transition: .3s ease;

opacity: 0;

}

.icon:before{

top: -5px;

border-bottom: 10px solid #000;

}

.icon:after{

top: 15px;

border-top: 10px solid #000;

}

.fa:hover>.icon:before{

opacity: 1;

transform: rotate(135deg) translateX(5px) translateY(-25px);

-webkit-transform: rotate(135deg) translateX(5px) translateY(-25px);

}

.fa:hover>.icon:after{

opacity: 1;

transform: rotate(-135deg) translateX(20px) translateY(39px);

-webkit-transform: rotate(-135deg) translateX(20px) translateY(39px);

}
</style>
</head>
<body>

<div class="removes" title="关闭"></div>
	<div class="fa"><div class="icon"></div></div>
</body>
</html>

1 

 

2

 参考 用css写一个关闭的“X”_马卫斌 前端工程师的博客-CSDN博客_css 关闭x

css动画工具栏,菜单栏“三”变形为“X”css3过渡动画详解_Victor.ZZ的博客-CSDN博客

 

更多推荐

用css写 三 与 X 切换