效果:
HTML:
<div class="divSide">
<span class="s-1" />
<span class="s-2" />
<span class="s-3" />
<span class="s-4" />
</div>
CSS :
.divSide {
overflow: hidden;
width: 460px;
height: 994px;
position: relative;
background-color: #021025;
border: 1px solid rgba(11, 85, 140, 0.5);
>span{
position: absolute;
display: block;
}
.s-1 {
filter: hue-rotate(0deg);
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent, #3a86ff);
animation: animate1 1s linear infinite;
}
.s-2 {
filter: hue-rotate(60deg);
top: -100%;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg, transparent, #3a86ff);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}
.s-3 {
filter: hue-rotate(120deg);
bottom: 0;
right: 0;
width: 100%;
background: linear-gradient(270deg, transparent, #3a86ff);
animation: animate3 1s linear infinite;
animation-delay: 0.5s;
}
.s-4 {
filter: hue-rotate(300deg);
bottom: -100%;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(360deg, transparent, #3a86ff);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}
}
@keyframes animate1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
@keyframes animate2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
@keyframes animate3 {
0% {
right: -100%;
height: 3px;
}
50%,
100% {
height: 2px;
right: 100%;
}
}
@keyframes animate4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}