HTML CSS Animated Background Effect

If you want to animate any part of your web element by adding movement or any kind of effect using only CSS, then it is called CSS animation. In this type of animation, without relying on JavaScript, we can easily create animated text, buttons, loading animations, etc. CSS animation makes your websites more attractive and modern. In this blog post, we will share a simple but beautiful CSS animation snippet source code about background animation. The process of creating this complete CSS snippet is shown in the video tutorial below. Before collecting the source code, watch this tutorial.

Video Tutorial:

We hope you have watched the entire tutorial on HTML, CSS background Animation. Animated background or background animations are the subtle or dynamic moving effects that usually run behind the background of a website section. Moving gradients, floating shapes, particle effects, or looping visuals are examples of background animations or animated backgrounds. The primary purpose of using background animations is to add depth and energy to any design. It also helps to make the website stand out visually and keep the user more engaged than other static websites. Background animations build a different mood or emotion that matches any type of brand. For example, tech websites use a particle background because it resembles innovation. Agency-type of websites use colorful gradient transitions because they resemble originality. Entertainment websites use this to create excitement and keep the audience hooked for a long time.

You May Also Like:

HTML CSS Animated Background Effect [ Source Code ]:

To create this Background animation snippet, we have to create an HTML file and a CSS file. After that, you have to copy the code from the code box below and paste it into your file. If there are any problems. If you face any problem, you can download the code from the download button below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Background using HTML & CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>      
</body>
</html>

ADD CSS:

.wrapper {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #000;
    overflow: hidden;
}

.wrapper span {
    border-radius: 5px;
    top: 105%;
    position: absolute;
    box-shadow: 0 1vw 2vw 1vw #0159e4;
    animation: animate linear infinite;
}

.wrapper span:nth-child(1) {
    width: 30px;
    height: 30px;
    left: 5%;
    animation-duration: 9s;
}

.wrapper span:nth-child(2) {
    width: 40px;
    height: 40px;
    left: 10%;
    animation-duration: 17s;
}

.wrapper span:nth-child(3) {
    width: 25px;
    height: 25px;
    left: 20%;
    animation-duration: 10s;
    animation-delay: 8s;
}

.wrapper span:nth-child(4) {
    width: 20px;
    height: 20px;
    left: 30%;
    animation-duration: 7s;
    animation-delay: 7s;
}

.wrapper span:nth-child(5) {
    width: 35px;
    height: 35px;
    left: 40%;
    animation-duration: 10s;
}

.wrapper span:nth-child(6) {
    width: 50px;
    height: 50px;
    left: 50%;
    animation-duration: 6s;
}

.wrapper span:nth-child(7) {
    width: 20px;
    height: 20px;
    left: 60%;
    animation-duration: 12s;
    animation-delay: 4.5s;
}

.wrapper span:nth-child(8) {
    width: 30px;
    height: 30px;
    left: 80%;
    animation-duration: 8s;
}

.wrapper span:nth-child(9) {
    width: 25px;
    height: 25px;
    left: 85%;
    animation-duration: 20s;
}

.wrapper span:nth-child(10) {    
    width: 50px;
    height: 50px;
    left: 95%;
    animation-duration: 15s;
    animation-delay: 6s;
}

@keyframes animate {
    100% {
        transform: translate3d(0, 0, 1px) translate(0, -120vh);
    }
}

Websites without animation often look dull and flat, while websites with creative animations look more elegant and professional. Background animations often play a big role in how a website feels and how users interact with it. Animated backgrounds can guide visitors, reinforce branding, and make a site memorable. We hope you have collected the source code. For more source code, please click the "Load More" button on our homepage. Thank you for visiting.

DOWNLOAD CODE

Video Tutorial:

HTML CSS Animated Background Effect [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

HTML CSS Animated Background Effect

Video Tutorial:

HTML CSS Animated Background Effect [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form