<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{background:#000;}
div{
height:80px;
width:80px;
color:#fff;
position:relative;
}
div::before {
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
transform: scale3d(0, 1, 1);
}
div::before {
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
transform-origin: center center 0;
transition: transform 0.5s ease 0s;
width: 100%;
}
div:hover::before {
transform: scale3d(1, 1, 1);
}
div::before {
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
transform: scale3d(0, 1, 1);
width:80px;
height:80px;
}
</style>
</head>
<body>
<div>
活动
</div>
</body>
</html>
网友评论