Text Animations using Background Image

byCodingFlicks -November 01, 2020

0

Today, I share another exciting yet straightforward CSS animation snippet based on text animations using a background image. We have achieved the animation using CSS background-clip style. This project is relatively short, and the codings are self-explanatory. I have shared a lot of CSS animation snippets before in this blog. Check those source codes if you are interested. This project is a CSS keyframes-based animation where I moved the image's background-position from left to right with linear animation-direction and infinite animation-iteration-count. Without describing further, I am providing you the code below.

Copy and paste the HTML and CSS code below and paste those to your project.

HTML

<!DOCTYPE html>
<!--Code by codingflicks (www.codingflicks.com)-->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>text animations using background image</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="box">
		<h1>CREATIVO</h1>
	</div>
</body>
</html>

CSS

body {
	background: #000;
}
body, h1 {
	margin: 0;
	padding: 0;
	font-family: poppins;
}
.box h1 {
	font-size: 150px;
	color: rgba(225, 255, 255, .1);
	background-image: url(https://i.postimg.cc/J4pRpffc/2.jpg);
	background-repeat: repeat-x;
	-webkit-background-clip: text;
	animation: animate 15s linear infinite;
	font-weight: 900;
}
.box {
	margin-top: 17%;
	text-align: center;
}
@keyframes animate {
	0% {
		background-position: left 0px top 10px;
	}
	40% {
		background-position: left 800px top 10px;
	}
}

Thank you for visiting this page and keep coming for more interesting snippets.

Please do not enter any spam link in the comment box.