Adding an animated background to your website or application can contribute to a unique, interesting design. Creative backgrounds can invoke emotion and enhance the user experience.
There are many ways to create an animated background for your application, but a simple combination of plain HTML and CSS works particularly well. Check out this example, learn how its code works, and see a live demo of the final animated background.
Create the HTML Structure
You’re going to create a blue color background with bubbles that grow and float upwards. You can see the end result on thisCodepen.
Start by creating asectionwith the classwrapperto house the animation.
Then, create 10 divs that will represent the bubbles. Inside each div, create a span with the classdot. You canlearn these essential HTML tags in 10 minutesif you’re new to HTML.
Style With CSS Code
you’re able to create incrediblebackground effects using only HTML. But for this project, you will use CSS to style and animate the background.
First, set the margin and padding at 0 to ensure no spaces around the background.
Then, style the parent section using the wrapper class. This section will have 100% width and height to fill the entire page. Set its background color as a shade of blue and give it an absolute position.
Style the H1 with an absolute position too. To place it in the center of the page, start by setting its top left position to 50%. Then use translate to move it up and to the left, so its center is exactly in the middle.
Next, style the divs which will be circular to act as animated bubbles. Give each div a height, width, and border. The large border-radius ensures the border is a circle. Also, set an animation duration using the CSS animation property.
Style the dots with a 5px height and width. Give the dots a border-radius and a white background. Position each one absolutely, close to the top-right of its parent div.
Next, use the nth-child selector to position each div with different settings. You can name the animationanimate; you’ll define it later using @keyframes.
Usenth-child(2)to address the firstdivsince the first child of the.wrapperelement is theh1.
You can give the lower divs higher percentages so that they rise to the top at different intervals.
Use @keyframes to gradually change and rotate the circles and dots at different intervals. In the following code, the dots rotate at 70 degrees and the circles at 360. This rotation creates the bubble effect.
You canmake backgrounds more stylish using CSS patterns. Patterns allow you to create waves, grids, leaves, and other patterns to help you create amazing animations.
You Can Animate Many Properties Using CSS
you’re able to create different types of animations using CSS. These include changing the background color and delaying the runtime of an animation.
You can also set how often an animation should run, even to infinity. You can also set the direction the animation should move: forward or reverse. It’s fun playing around with animations and you can use them to bring your applications to life.
