CSS 스타일링

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>border animation</title>

<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.box_wrap{
width: 400px;
height: 400px;
background-color: antiquewhite;
margin: 100px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

/* 타이틀 */
.title{
font-size: 32px;
font-weight: bold;
opacity: 0;
transform: translateY(20px);
transition: 0.5s;
}

/* hover 시 타이틀 등장 */
.box_wrap:hover .title{
opacity: 1;
transform: translateY(0);
transition-delay: 1s;
}

/* 라인 공통 */
.line{
position: absolute;
background-color: black;
transition: 0.5s;
}

/* 위 */
.top{
width: 0;
height: 5px;
top: 0;
left: 0;
}

/* 오른쪽 */
.right{
width: 5px;
height: 0;
top: 0;
right: 0;
}

/* 아래 */
.bottom{
width: 0;
height: 5px;
bottom: 0;
right: 0;
}

/* 왼쪽 */
.left{
width: 5px;
height: 0;
bottom: 0;
left: 0;
}

/* 순서 애니메이션 */
.box_wrap:hover .top{
width: 100%;
}

.box_wrap:hover .right{
height: 100%;
transition-delay: 0.3s;
}

.box_wrap:hover .bottom{
width: 100%;
transition-delay: 0.6s;
}

.box_wrap:hover .left{
height: 100%;
transition-delay: 0.9s;
}

</style>
</head>

<body>

<div class="box_wrap">
<div class="title">화이팅!!</div>

<div class="line top"></div>
<div class="line right"></div>
<div class="line bottom"></div>
<div class="line left"></div>
</div>

</body>
</html>