前端在做一些界面,尤其是当下各种忽悠人的大屏盛行。就得用一些稍微炫酷唬人点的东西给大家伙瞅瞅,不然怎么忽悠别人。
图示:
以下是代码,如果不想研究实现原理可直接复制粘贴。
首先边框,在原有的边框内部需要加两个元素作为两条线,另外两条线用伪类元素--before和after。
<div class="box">
<i class="top"></i><i class="bottom"></i>
</div>
style如下,这里用了scss 可根据需求自行更改。
<style scoped lang="scss">
.box {
width: 40%;
height: 100%;
border: 1px solid #00bbff;
position: relative;
overflow: hidden;
&::before {
content: ' ';
position: absolute;
width: 4px;
height: 100%;
top: -100%;
left: 0;
background-image: linear-gradient(
0deg,
transparent,
#74efff,
transparent
);
animation: two 4s linear infinite;
}
&::after {
content: ' ';
position: absolute;
width: 4px;
height: 100%;
bottom: -100%;
right: 0;
background-image: linear-gradient(
360deg,
transparent,
#74efff,
transparent
);
animation: four 4s linear 2s infinite;
}
i {
position: absolute;
display: inline-block;
height: 4px;
width: 100%;
}
.bottom {
bottom: 0;
left: -100%;
background-image: linear-gradient(
270deg,
transparent,
#74efff,
transparent
);
animation: one 4s linear 1s infinite;
}
.top {
top: 0;
right: -100%;
background-image: linear-gradient(
270deg,
transparent,
#74efff,
transparent
);
animation: three 4s linear 3s infinite;
}}
@keyframes one {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
@keyframes two {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
@keyframes three {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
@keyframes four {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
</style>