Animated Text Background Using HTML & Pure CSS
Hello Reader!, This code creates a simple webpage with an animated text background. The webpage has a <!DOCTYPE> declaration, an opening <html> tag, and a <head> section that sets the character set, viewport, and links a stylesheet called “style.css”. The <body> of the webpage has a single <h1> heading that says “Code Hack”.
The CSS styles in this code set the background color of the entire page to a dark blue, center the text on the page, and set the font family to Verdana. It also sets the background of the <h1> heading to an image called “img.jpg” and uses the -webkit-background-clip property to clip the background to the text. The text itself is use to be transparent, so the background image is visible instead.
The animation is applie to the <h1> heading and is called “textbg”. It runs for 20 seconds and is use to repeat indefinitely. The animation moves the background image from its starting position (0,0) to its end position (100%,100%) to create a scrolling effect.
Video Tutorial of Animated Text Background
To see a live demonstration of the Animated Fill Button, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Animated Fill Button
HTML Part:
Create a new file with the name “index.html
” and add the provide code to it. Ensure the file has a “.html
” extension.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Animated Text Background</title> </head> <body> <h1>Code Hack</h1> </body> </html>
The code in the body of this HTML document is very simple, it only contains a single <h1> tag with the text “Code Hack”. This is the main headline of the webpage, and it is likely that the text will be style using CSS to be visually appealing and to match the theme of the webpage.
The <h1> tag is a heading element and it is use to create a top-level heading on the webpage. It is the most important heading and it should be use sparingly on the webpage, typically only once at the top of the webpage.
The text “Code Hack” within the <h1> tag represents the main title or topic of the webpage. The text is render in the default font size and font style of the browser, but this can be modifie with CSS to match the design of the webpage.
CSS Part:
Create a new CSS file name “style.css
” and copy the provide code into it. Ensure that the file has a “.css
” extension.
body { height: 100vh; display: flex; justify-content: center; align-items: center; font-family: Verdana, Geneva, Tahoma, sans-serif; background: #273c75; overflow: hidden; } h1 { font-size: 200px; text-align: center; text-transform: uppercase; background: url(img.jpg); -webkit-background-clip: text; color: transparent; animation: textbg 20s linear infinite; } @keyframes textbg { from { background-position: 0 0; } to { background-position: 100% 100%; } }
This CSS code is using the following properties to create an animated text background effect:
- The
animation
property is used on the <h1> tag to apply the animation effect, in this case is the keyframe name “textbg” with a duration of 20 seconds, a linear timing function and it will repeat indefinitely. - The
@keyframes
rule is used to create the animation, in this case, it changes the background-position of the <h1> element from 0,0 to 100%, 100% over the course of the animation, creating the illusion of the background image moving across the text. - The
background
property is used on the <h1> tag to set the background image for the text. - The
-webkit-background-clip: text
property is used to clip the background image to the shape of the text, so it only shows up behind the text and not the entire <h1> element. - The
color: transparent
property is used to make the text transparent so that only the background image is visible.
Summary:
Overall, this CSS code create an effect where the background image is use to fill the text of the <h1> element, and it animates the background image to move across the text, creating an animated text background effect.