Animated Image Pattern with HTML & Pure CSS
In this blog, we have a basic HTML template with a DOCTYPE
declaration, html
and head
elements, and a body
element. The meta
tags in the head
element provide information about the document, such as the character set and the viewport. There’s also a link
element that links to a stylesheet
named “style.css”
The body
element contains a div
element with the class “pattern”. This class is used to style the background of the div
element. The CSS styles for the body
and .pattern
classes are defined in the stylesheet.
The body
class sets the margin
, padding
and overflow
properties. The .pattern
class sets the width
, height
, and background
properties of the div
element. The background-position
property is set to 0 0
, which means that the background image will be positioned at the top left corner of the div
element.
The animation
property is set to pattern 15s linear infinite
, which means that the pattern
animation will run for 15 seconds, in a linear fashion, and will repeat indefinitely.
The @keyframes
rule is used to define the animation. The from
and to
keywords are used to specify the starting and ending positions of the background image. In this case, the animation starts with the background image positioned at 0 0
, and ends with the background image positioned at 800px 600px
. This creates the illusion of the background image moving across the div
element.
The pattern
animation is controlled by the animation
property of the .
pattern
class. This means that the div
element with class pattern
will have the animation.
Video Tutorial of Animated Image Pattern
To see a live demonstration of the Animated Image Pattern, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
You might like this:
- Background Change Animation
- Fill Text Effect
- Glowing Text Effect
- Heartbeat Animation
- Lighting text effect
Animated Image Pattern
HTML:
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 Image Pattern</title> </head> <body> <div class="pattern"></div> </body> </html>
This code is an HTML document with a head and body section. The head section includes a meta tag for character encoding, a link to a stylesheet called “style.css”, and a title for the webpage. The body section has a single div element with the class “pattern.” The styles for the .pattern class are define in the linked stylesheet “style.css”. The div will be style according to the CSS rules applie to the .pattern class.
CSS:
Create a new CSS file name “style.css
” and copy the provide code into it. Ensure that the file has a “.css
” extension.
body{ margin: 0; padding: 0; overflow: hidden; } .pattern{ width: 100%; height: 100vh; background: url(bg.png); background-position: 0 0; animation: pattern 15s linear infinite; } @keyframes pattern{ from{ background-position: 0 0; } to{ background-position: 800px 600px; } }
This code is a CSS stylesheet that applies styles to the body and a class called “.pattern”. The body has its margins, padding and overflow set to hidden. The .pattern class has its width and height use to 100%, and a background image is use to “bg.png”. The background-position is use to 0 0, and an animation is applie to the class with the name “pattern” which has a duration of 15s, runs in a linear fashion and is use to repeat indefinitely. The animation changes the background-position of the element from 0 0 to 800px 600px. The animation is define in the keyframes as “pattern” and the animation will be running from the start position to the end position.
Summary:
TThis code is an HTML document with a head and body section. The head section includes a meta tag for character encoding, a link to a stylesheet called “style.css”, and a title for the webpage. The body section has a single div element with the class “pattern.” In the style.css file, there are CSS rules that apply to the body and the .pattern class. The body has its margins, padding and overflow set to hidden. The .pattern class has its width and height use to 100%, and a background image is use to “bg.png”. The background-position is use to 0 0, and an animation is applie to the class with the name “pattern” which has a duration of 15s and is use to repeat infinitely. The animation changes the background-position of the element from 0 0 to 800px 600px.