Text Background Animation

Posted on : 13th May 2022 | Author : @ByDev24

						<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
<div class="box-container">
	<h1 class="text-bg">A</h1>
</div>

					

						 body{
	font-family: 'Roboto', sans-serif;
}
.box-container {max-width: 100%;width: 400px;margin: 0 auto;box-shadow: 0px 0px 10px #0000000f;border-radius: 10px;text-align: center;padding: 20px;background: #ffc5bf;}
h1.text-bg{
	background-image:url(https://code.bydev24.com/uploads/code-snippts/text-bg-background.jpg);
}
h1.text-bg {margin: 0;font-size: 300px;-webkit-text-fill-color: transparent;
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;
    background-position: center;
    -webkit-animation: moving 21s linear infinite;
    -moz-animation: moving 21s linear infinite;
    -moz-animation: moving 21s linear infinite;
    -o-animation: moving 21s linear infinite; 
}
@-webkit-keyframes moving {
	0% { background-position: right bottom; }
	50% { background-position: left top; }
	100% { background-position: right bottom; }
}
@-moz-keyframes moving {
	0% { background-position: right bottom; }
	50% { background-position: left top; }
	100% { background-position: right bottom; }
}

					

						console.log('no javascript required')

					

Output

More Snipps