Html Code: Moving Clouds in HTML Page

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.

<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<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;font-family:Tahoma">HTML Best Codes</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Html Best Codes

Html Code: Moving Clouds in HTML Page

Links