<!-- this script is provided by http://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='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>