Just trying something out with box-shadow
No explanation for this thing. Just felt compelled to created it.
#multiple-box-shadows-2 div {
width: 5em;
height: 5em;
border: .115em solid black;
background-color: yellow;
box-shadow:
-.33em .33em 0 0 rgba(208,61,16,.9),
-.67em .67em 0 0 rgba(208,61,16,.8),
-1em 1em 0 0 rgba(208,61,16,.7),
-1.33em 1.33em 0 0 rgba(208,61,16,.6),
-1.67em 1.67em 0 0 rgba(208,61,16,.5);
animation: moveshadow ease-in-out 6s infinite;
}
@keyframes moveshadow {
0% {
box-shadow:
-.33em .33em 0 0 rgba(208,61,16,.9),
-.67em .67em 0 0 rgba(208,61,16,.8),
-1em 1em 0 0 rgba(208,61,16,.7),
-1.33em 1.33em 0 0 rgba(208,61,16,.6),
-1.67em 1.67em 0 0 rgba(208,61,16,.5);
}
25% {
box-shadow:
.33em .33em 0 0 rgba(208,61,16,.9),
.67em .67em 0 0 rgba(208,61,16,.8),
1em 1em 0 0 rgba(208,61,16,.7),
1.33em 1.33em 0 0 rgba(208,61,16,.6),
1.67em 1.67em 0 0 rgba(208,61,16,.5);
}
50% {
box-shadow:
.33em -.33em 0 0 rgba(208,61,16,.9),
.67em -.67em 0 0 rgba(208,61,16,.8),
1em -1em 0 0 rgba(208,61,16,.7),
1.33em -1.33em 0 0 rgba(208,61,16,.6),
1.67em -1.67em 0 0 rgba(208,61,16,.5);
}
75% {
box-shadow:
-.33em -.33em 0 0 rgba(208,61,16,.9),
-.67em -.67em 0 0 rgba(208,61,16,.8),
-1em -1em 0 0 rgba(208,61,16,.7),
-1.33em -1.33em 0 0 rgba(208,61,16,.6),
-1.67em -1.67em 0 0 rgba(208,61,16,.5);
}
}