<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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博客