It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 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.
<!-- 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>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!