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 https://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='https://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!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300