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);
	}
}

Leave a Reply

Your email address will not be published.

Color scheme: