Cloud Effect code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cloud Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="cloud1"><img src="cloud1.png"></div> <div class="cloud2"><img src="cloud2.png"></div> <div class="cloud3"><img src="cloud1.png"></div> <div class="cloud4"><img src="cloud2.png"></div> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } .container { background: url(image.jpg); background-size: cover; height: 650px; width: 100%; position: relative; overflow: hidden; } .container img { width: 100%; } .container .cloud1 { position: absolute; top: 60px; animation: cloudOne infinite 30s linear; } .container .cloud2 { position: absolute; top: -50px; animation: cloudOne infinite 45s linear; } .container .cloud3 { position: absolute; top: 0px; animation: cloudOne infinite 15s linear; } .container .cloud4 { position: absolute; top: 0px; animation: cloudOne infinite 60s linear; } @keyframes cloudOne { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes cloudTwo { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes cloudTree { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes cloudFour { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
