<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin:0;
padding:0;
}
.box {
width:100px;
height:100px;
background-color:#eee;
margin:50px;
position:relative;
}
.box i {
position:absolute;
background-color:#f60;
transition:all .1s;
}
.box i.i1 {
top:0;
right:0;
width:0;
height:2px;
transition-delay:.3s;
}
.box i.i2 {
top:0;
left:0;
width:2px;
height:0;
transition-delay:.2s;
}
.box i.i3 {
bottom:0;
left:0;
width:0;
height:2px;
transition-delay:.1s;
}
.box i.i4 {
bottom:0;
right:0;
width:2px;
height:0;
transition-delay:0s;
}
.box:hover i.i1{
width:100px;
transition-delay:.2s;
}
.box:hover i.i2{
height:100px;
transition-delay:.3s;
}
.box:hover i.i3{
width:100px;
transition-delay:.4s;
}
.box:hover i.i4{
height:100px;
transition-delay:.3s;
}
</style>
<body>
<div class="box">
<p>手游排行榜</p>
<i class="i1"></i>
<i class="i2"></i>
<i class="i3"></i>
<i class="i4"></i>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a155f5b76ad7e5dca86de75a7285a9c4.gif#pic_center)