div
View Compiled
// Modify to change general color theme
$backgroundColor: #1f3244;
// Modify to adjust the shadow color
$shadowColor: darken($backgroundColor, 20);
// Modify to adjust the shadow spacing
$size: 5vmin;
body {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background-color: $backgroundColor;
}
div {
position: relative;
&::before,
&::after {
position: absolute;
content: " ";
will-change: box-shadow;
}
&::before {
animation: grow1 10s linear infinite;
}
&::after {
animation: grow2 10s linear infinite;
}
}
/**====== Shadow Animation Keyframing ======**/
@keyframes grow1 {
0% {
box-shadow: 0 0 0 rgba($shadowColor, 0.4),
0 0 0 ($size * 1) rgba($shadowColor, 0.36),
0 0 0 ($size * 2) rgba($shadowColor, 0.32),
0 0 0 ($size * 3) rgba($shadowColor, 0.28),
0 0 0 ($size * 4) rgba($shadowColor, 0.24),
0 0 0 ($size * 5) rgba($shadowColor, 0.2),
0 0 0 ($size * 6) rgba($shadowColor, 0.16),
0 0 0 ($size * 7) rgba($shadowColor, 0.12),
0 0 0 ($size * 8) rgba($shadowColor, 0.08),
0 0 0 ($size * 9) rgba($shadowColor, 0.04);
}
10% {
box-shadow: 0 0 0 ($size * 1) rgba($shadowColor, 0.36),
0 0 0 ($size * 2) rgba($shadowColor, 0.32),
0 0 0 ($size * 3) rgba($shadowColor, 0.28),
0 0 0 ($size * 4) rgba($shadowColor, 0.24),
0 0 0 ($size * 5) rgba($shadowColor, 0.2),
0 0 0 ($size * 6) rgba($shadowColor, 0.16),
0 0 0 ($size * 7) rgba($shadowColor, 0.12),
0 0 0 ($size * 8) rgba($shadowColor, 0.08),
0 0 0 ($size * 9) rgba($shadowColor, 0.04),
0 0 0 ($size * 10) rgba($shadowColor, 0);
}
20% {
box-shadow: 0 0 0 ($size * 2) rgba($shadowColor, 0.32),
0 0 0 ($size * 3) rgba($shadowColor, 0.28),
0 0 0 ($size * 4) rgba($shadowColor, 0.24),
0 0 0 ($size * 5) rgba($shadowColor, 0.2),
0 0 0 ($size * 6) rgba($shadowColor, 0.16),
0 0 0 ($size * 7) rgba($shadowColor, 0.12),
0 0 0 ($size * 8) rgba($shadowColor, 0.08),
0 0 0 ($size * 9) rgba($shadowColor, 0.04),
0 0 0 ($size * 10) rgba($shadowColor, 0),
0 0 0 ($size * 11) rgba($shadowColor, 0);
}
30% {
box-shadow: 0 0 0 ($size * 3) rgba($shadowColor, 0.28),
0 0 0 ($size * 4) rgba($shadowColor, 0.24),
0 0 0 ($size * 5) rgba($shadowColor, 0.2),
0 0 0 ($size * 6) rgba($shadowColor, 0.16),
0 0 0 ($size * 7) rgba($shadowColor, 0.12),
0 0 0 ($size * 8) rgba($shadowColor, 0.08),
0 0 0 ($size * 9) rgba($shadowColor, 0.04),
0 0 0 ($size * 10) rgba($shadowColor, 0),
0 0 0 ($size * 11) rgba($shadowColor, 0),
0 0 0 ($size * 12) rgba($shadowColor, 0);
}
40% {
box-shadow: 0 0 0 ($size * 4) rgba($shadowColor, 0.24),
0 0 0 ($size * 5) rgba($shadowColor, 0.2),
0 0 0 ($size * 6) rgba($shadowColor, 0.16),
0 0 0 ($size * 7) rgba($shadowColor, 0.12),
0 0 0 ($size * 8) rgba($shadowColor, 0.08),
0 0 0 ($size * 9) rgba($shadowColor, 0.04),
0 0 0 ($size * 10) rgba($shadowColor, 0),
0 0 0 ($size * 11) rgba($shadowColor, 0),
0 0 0 ($size * 12) rgba($shadowColor, 0),
0 0 0 ($size * 13) rgba($shadowColor, 0);
}
50% {
box-shadow: 0 0 0 ($size * 5) rgba($shadowColor, 0.2),
0 0 0 ($size * 6) rgba($shadowColor, 0.16),
0 0 0 ($size * 7) rgba($shadowColor, 0.12),
0 0 0 ($size * 8) rgba($shadowColor, 0.08),
0 0 0 ($size * 9) rgba($shadowColor, 0.04),
0 0 0 ($size * 10) rgba($shadowColor, 0),
0 0 0 ($size * 11) rgba($shadowColor, 0),
0 0 0 ($size * 12) rgba($shadowColor, 0),
0 0 0 ($size * 13) rgba($shadowColor, 0),
0 0 0 ($size * 14) rgba($shadowColor, 0);
}
60% {
box-shadow: 0 0 0 ($size * 6) rgba($shadowColor, 0.16),
0 0 0 ($size * 7) rgba($shadowColor, 0.12),
0 0 0 ($size * 8) rgba($shadowColor, 0.08),
0 0 0 ($size * 9) rgba($shadowColor, 0.04),
0 0 0 ($size * 10) rgba($shadowColor, 0),
0 0 0 ($size * 11) rgba($shadowColor, 0),
0 0 0 ($size * 12) rgba($shadowColor, 0),
0 0 0 ($size * 13) rgba($shadowColor, 0),
0 0 0 ($size * 14) rgba($shadowColor, 0),
0 0 0 ($size * 15) rgba($shadowColor, 0);
}
70% {
box-shadow: 0 0 0 ($size * 7) rgba($shadowColor, 0.12),
0 0 0 ($size * 8) rgba($shadowColor, 0.08),
0 0 0 ($size * 9) rgba($shadowColor, 0.04),
0 0 0 ($size * 10) rgba($shadowColor, 0),
0 0 0 ($size * 11) rgba($shadowColor, 0),
0 0 0 ($size * 12) rgba($shadowColor, 0),
0 0 0 ($size * 13) rgba($shadowColor, 0),
0 0 0 ($size * 14) rgba($shadowColor, 0),
0 0 0 ($size * 15) rgba($shadowColor, 0),
0 0 0 ($size * 16) rgba($shadowColor, 0);
}
80% {
box-shadow: 0 0 0 ($size * 8) rgba($shadowColor, 0.08),
0 0 0 ($size * 9) rgba($shadowColor, 0.04),
0 0 0 ($size * 10) rgba($shadowColor, 0),
0 0 0 ($size * 11) rgba($shadowColor, 0),
0 0 0 ($size * 12) rgba($shadowColor, 0),
0 0 0 ($size * 13) rgba($shadowColor, 0),
0 0 0 ($size * 14) rgba($shadowColor, 0),
0 0 0 ($size * 15) rgba($shadowColor, 0),
0 0 0 ($size * 16) rgba($shadowColor, 0),
0 0 0 ($size * 17) rgba($shadowColor, 0);
}
90% {
box-shadow: 0 0 0 ($size * 9) rgba($shadowColor, 0.04),
0 0 0 ($size * 10) rgba($shadowColor, 0),
0 0 0 ($size * 11) rgba($shadowColor, 0),
0 0 0 ($size * 12) rgba($shadowColor, 0),
0 0 0 ($size * 13) rgba($shadowColor, 0),
0 0 0 ($size * 14) rgba($shadowColor, 0),
0 0 0 ($size * 15) rgba($shadowColor, 0),
0 0 0 ($size * 16) rgba($shadowColor, 0),
0 0 0 ($size * 17) rgba($shadowColor, 0),
0 0 0 ($size * 18) rgba($shadowColor, 0);
}
100% {
box-shadow: 0 0 0 ($size * 10) rgba($shadowColor, 0),
0 0 0 ($size * 11) rgba($shadowColor, 0),
0 0 0 ($size * 12) rgba($shadowColor, 0),
0 0 0 ($size * 13) rgba($shadowColor, 0),
0 0 0 ($size * 14) rgba($shadowColor, 0),
0 0 0 ($size * 15) rgba($shadowColor, 0),
0 0 0 ($size * 16) rgba($shadowColor, 0),
0 0 0 ($size * 17) rgba($shadowColor, 0),
0 0 0 ($size * 18) rgba($shadowColor, 0),
0 0 0 ($size * 19) rgba($shadowColor, 0);
}
}
@keyframes grow2 {
0% {
box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0);
}
10% {
box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0.4);
}
20% {
box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0.4),
0 0 0 ($size * 1) rgba($shadowColor, 0.36);
}
30% {
box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0.4),
0 0 0 ($size * 1) rgba($shadowColor, 0.36),
0 0 0 ($size * 2) rgba($shadowColor, 0.32);
}
40% {
box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0.4),
0 0 0 ($size * 1) rgba($shadowColor, 0.36),
0 0 0 ($size * 2) rgba($shadowColor, 0.32),
0 0 0 ($size * 3) rgba($shadowColor, 0.28);
}
50% {
box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0.4),
0 0 0 ($size * 1) rgba($shadowColor, 0.36),
0 0 0 ($size * 2) rgba($shadowColor, 0.32),
0 0 0 ($size * 3) rgba($shadowColor, 0.28),
0 0 0 ($size * 4) rgba($shadowColor, 0.24);
}
60% {
box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0.4),
0 0 0 ($size * 1) rgba($shadowColor, 0.36),
0 0 0 ($size * 2) rgba($shadowColor, 0.32),
0 0 0 ($size * 3) rgba($shadowColor, 0.28),
0 0 0 ($size * 4) rgba($shadowColor, 0.24),
0 0 0 ($size * 5) rgba($shadowColor, 0.2);
}
70% {
box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0.4),
0 0 0 ($size * 1) rgba($shadowColor, 0.36),
0 0 0 ($size * 2) rgba($shadowColor, 0.32),
0 0 0 ($size * 3) rgba($shadowColor, 0.28),
0 0 0 ($size * 4) rgba($shadowColor, 0.24),
0 0 0 ($size * 5) rgba($shadowColor, 0.2),
0 0 0 ($size * 6) rgba($shadowColor, 0.16);
}
80% {
box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
0 0 0 0 rgba($shadowColor, 0.4),
0 0 0 ($size * 1) rgba($shadowColor, 0.36),
0 0 0 ($size * 2) rgba($shadowColor, 0.32),
0 0 0 ($size * 3) rgba($shadowColor, 0.28),
0 0 0 ($size * 4) rgba($shadowColor, 0.24),
0 0 0 ($size * 5) rgba($shadowColor, 0.2),
0 0 0 ($size * 6) rgba($shadowColor, 0.16),
0 0 0 ($size * 7) rgba($shadowColor, 0.12);
}
90% {
box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0.4),
0 0 0 ($size * 1) rgba($shadowColor, 0.36),
0 0 0 ($size * 2) rgba($shadowColor, 0.32),
0 0 0 ($size * 3) rgba($shadowColor, 0.28),
0 0 0 ($size * 4) rgba($shadowColor, 0.24),
0 0 0 ($size * 5) rgba($shadowColor, 0.2),
0 0 0 ($size * 6) rgba($shadowColor, 0.16),
0 0 0 ($size * 7) rgba($shadowColor, 0.12),
0 0 0 ($size * 8) rgba($shadowColor, 0.08);
}
100% {
box-shadow: 0 0 0 0 rgba($shadowColor, 0.4),
0 0 0 ($size * 1) rgba($shadowColor, 0.36),
0 0 0 ($size * 2) rgba($shadowColor, 0.32),
0 0 0 ($size * 3) rgba($shadowColor, 0.28),
0 0 0 ($size * 4) rgba($shadowColor, 0.24),
0 0 0 ($size * 5) rgba($shadowColor, 0.2),
0 0 0 ($size * 6) rgba($shadowColor, 0.16),
0 0 0 ($size * 7) rgba($shadowColor, 0.12),
0 0 0 ($size * 8) rgba($shadowColor, 0.08),
0 0 0 ($size * 9) rgba($shadowColor, 0.04);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.