純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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
