Animated repeating linear gradient

animated-repeating-linear-gradient.markdown

Animated repeating linear gradient

A Pen by Motionharvest on CodePen.

License.

index.html

<div class="laser"></div>

style.scss

body {
	padding-top: 15em;
	margin: 0;
	background-color: black;
	overflow: hidden;
}

@keyframes projectileAnimation {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -100% 0;
	}
}

.laser {
	--player-color: yellow;
	position: absolute;
	width: 90%;
	height: 4px;
	background: repeating-linear-gradient(
		to right,
		transparent,
		var(--player-color) 5%,
		transparent 5%,
		transparent 10%
	);
	background-size: 200% 100%; /* Double the width for smooth looping */
	background-repeat: repeat-x;
	pointer-events: none;
	animation: projectileAnimation 2s linear infinite; /* Adjust animation duration as needed */
}