纯CSS打造绚丽边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>绚丽边框</title>
<style>
body{
background:#78F27A;
}
.box{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.load{
width: 300px;
height: 500px;
border:3px solid #E219F2;
text-align: center;
display: flex;
color:#E219F2;
justify-content: center;
align-items: center;
font-size: 12em;
transition: ease 400ms;
position: relative;
}
.load:hover{
background:#F29621;
color:#78F27A;
border:0;
}
.line{
width: 3px;
display: block;
position: absolute;
}
.line-1{
width: 3px;
height: 500px;
background:#7962F2;
position: absolute;
left: -3px;
top: -150px;
transition: ease 300ms;
opacity: 0;
}
.line-2{
width: 3px;
height: 500px;
background:#7962F2;
position: absolute;
right: -3px;
top: 150px;
transition: ease 300ms;
opacity: 0;
}
.line-3{
width: 306px;
height: 3px;
background:#7962F2;
position: absolute;
top: -3px;
right: -150px;
transition: ease 300ms;
opacity: 0;
}
.line-4{
width: 306px;
height: 3px;
background:#7962F2;
position: absolute;
bottom: -3px;
left: -150px;
transition: ease 300ms;
opacity: 0;
}
.load:hover .line-1{
top: 0px;
opacity: 1;
}
.load:hover .line-2{
top: 0px;
opacity: 1;
}
.load:hover .line-3{
right: -3px;
opacity: 1;
}
.load:hover .line-4{
left: -3px;
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="load">
G
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
<span class="line line-4"></span>
</div>
</div>
</body>
</html>
