Moving Clouds in HTML Page

Written by @kerixa 3 April 2021

The following code shows the movement of clouds on a HTML page. Which doubles the beauty of this code is placing a proper background like the one we set. You can use any images you like instead of the cloud. These animations are usually at the top of the page and will attract the attention of your website visitors, more.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: 'Quicksand', sans-serif;
}

body {
    background: #fff;
}

.container {
    width: 100%;
    height: 100%;
    background: url(https://www.htmlbestcodes.com/files/taj-mahal.jpg);
    background-size: cover;
    overflow-x: hidden;
}

.container span {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.container span:nth-child(1) {
    top: -10px;
    left: 0;
    background: url(https://www.htmlbestcodes.com/files/cloud1.png);
    background-repeat: no-repeat;
    background-size: 50% 50%;
    animation: animate 5s infinite linear;
}

.container span:nth-child(2) {
    top: 10px;
    left: 0;
    background: url(https://www.htmlbestcodes.com/files/cloud2.png);
    background-repeat: no-repeat;
    background-size: 50% 50%;
    animation: animate 5s infinite linear;
    animation-delay: 1s;
}

.container span:nth-child(3) {
    top: -10px;
    left: 0;
    background: url(https://www.htmlbestcodes.com/files/cloud1.png);
    background-repeat: no-repeat;
    background-size: 50% 50%;
    animation: animate 5s infinite linear;
    animation-delay: 2s;
}

.container span:nth-child(4) {
    top: 10px;
    left: 0;
    background: url(https://www.htmlbestcodes.com/files/cloud2.png);
    background-repeat: no-repeat;
    background-size: 50% 50%;
    animation: animate 5s infinite linear;
    animation-delay: 3s;
}

@keyframes animate {
0% {
    background-position: -100% 0;
}

100% {
    background-position: 200% 0;
}
}
</style>
<div class="container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>            
</div>     <a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Nikhil 999+, bishalthakur
advertisement 2