133 lines
1.7 KiB
CSS
133 lines
1.7 KiB
CSS
/* Taken from https://www.demo2s.com/html-css/css-flowing-circuit-animation.html */
|
|
|
|
html, body {
|
|
height:100%;
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
|
|
* {
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.circuit-outer {
|
|
position:relative;
|
|
width:80vw;
|
|
height:80vh;
|
|
margin:5% 10% 0;
|
|
padding:3px;
|
|
background:#eee;
|
|
/* border:1px solid #ddd; */
|
|
border:1px solid red;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.circuit-inner {
|
|
position:absolute;
|
|
top:3px;
|
|
bottom:3px;
|
|
left:3px;
|
|
right:3px;
|
|
background:#fff;
|
|
/* border:1px solid #ddd; */
|
|
border:1px solid blue;
|
|
}
|
|
|
|
.current {
|
|
background:orange;
|
|
position:absolute;
|
|
animation-iteration-count:1;
|
|
animation-timing-function:linear;
|
|
animation-fill-mode:forwards;
|
|
}
|
|
|
|
.current.bottom-left {
|
|
bottom:0;
|
|
right:80%;
|
|
width:20%;
|
|
height:3px;
|
|
animation-name:zap1;
|
|
animation-duration:.2s;
|
|
}
|
|
|
|
.current.left {
|
|
bottom:0;
|
|
left:0;
|
|
width:3px;
|
|
height:0;
|
|
animation-name:zap2;
|
|
animation-delay:.2s;
|
|
animation-duration:.5s;
|
|
}
|
|
|
|
.current.top {
|
|
top:0;
|
|
width:0;
|
|
height:3px;
|
|
animation-name:zap3;
|
|
animation-delay:.7s;
|
|
animation-duration:1s;
|
|
}
|
|
|
|
.current.right {
|
|
top:0;
|
|
right:0;
|
|
width:3px;
|
|
height:0;
|
|
animation-name:zap2;
|
|
animation-delay:1.7s;
|
|
animation-duration:.5s;
|
|
}
|
|
|
|
.current.bottom-right {
|
|
bottom:0;
|
|
right:0;
|
|
width:0%;
|
|
height:3px;
|
|
animation-name:zap4;
|
|
animation-delay:2.2s;
|
|
animation-duration:.8s;
|
|
}
|
|
|
|
@keyframes zap1 {
|
|
0% {
|
|
width:0;
|
|
}
|
|
|
|
100% {
|
|
width:20%;
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes zap2 {
|
|
0% {
|
|
height:0;
|
|
}
|
|
|
|
100% {
|
|
height:100%;
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes zap3 {
|
|
0% {
|
|
width:0;
|
|
}
|
|
|
|
100% {
|
|
width:100%;
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes zap4 {
|
|
0% {
|
|
width:0;
|
|
}
|
|
|
|
100% {
|
|
width:80%;
|
|
}
|
|
}
|