Simulating LED Rope light with border and box shadow


by Jeremy Caudle
code

Today I played around with the silly idea of animating a border and box shadow on a div to simulate the look of LED rope lights. A gradient on the border would probably lead to better results.

Duis pellentesque neque felis, ac suscipit justo sagittis quis. Curabitur sodales semper lorem. Ut nec lorem quam. Morbi euismod ultrices sem at dapibus. Integer vel hendrerit mi. Suspendisse potenti. Sed eu leo lectus. Cras placerat ullamcorper cursus. Praesent vestibulum massa at lorem malesuada, vel luctus ipsum rhoncus. Vivamus semper ac tellus vel gravida. Mauris blandit blandit metus ac dapibus. Nunc id neque commodo, dictum est eget, interdum dolor.

View the code:

HTML and JS 
<div class="codedoodle-block">
			<p>Duis pellentesque neque felis, ac suscipit justo sagittis quis. Curabitur sodales semper lorem. Ut nec lorem quam. Morbi euismod ultrices sem at dapibus. Integer vel hendrerit mi. Suspendisse potenti. Sed eu leo lectus. Cras placerat ullamcorper cursus. Praesent vestibulum massa at lorem malesuada, vel luctus ipsum rhoncus. Vivamus semper ac tellus vel gravida. Mauris blandit blandit metus ac dapibus. Nunc id neque commodo, dictum est eget, interdum dolor.</p>
			
		</div>
CSS 
@keyframes rotatehues{
			0% {border: dotted 3px transparent; border-color: transparent; box-shadow: 0 0 0 0 transparent;}
			1% {border-color: red;}
			5% {box-shadow: 0 1px 10px 10px rgba(255,0,0,.25);}
			49% {border-color: blue;}
			54% {box-shadow: 0 1px 10px 10px rgba(0,0,255,.25);}
			95% {border-color: green;}
			99% {box-shadow: 0 1px 10px 10px rgba(0,255,0,.25);}
		}
		
		.codedoodle-block {
			padding: 1rem;
			margin: 2rem auto;
			display: block;
			grid-gap: 1rem;
			max-width: 320px;
			border: dotted 3px #00000020;						
			animation: rotatehues 6s ease-in-out 0s infinite alternate;
			border-radius: 1rem;
		}

Tags