Snow Fall Animation code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Snow Falling Effect</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <section> <div class="snow1"></div> <div class="snow2"></div> <div class="snow3"></div> </section> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } section { background: url(image.jpg); background-size: cover; width: 100%; height: 1000px; position: relative; overflow: hidden; } .snow1 { background: url(snow.png); background-repeat: repeat; width: 100%; height: 1000px; position: absolute; top: 0; left: 0; animation: animateOne 10s infinite linear; } .snow2 { background: url(snow.png); background-repeat: repeat; width: 100%; height: 1000px; position: absolute; top: 0; left: 0; animation: animateTwo 10s infinite linear; background-size: 300px; filter: blur(1px); } .snow3 { background: url(snow.png); background-repeat: repeat; width: 100%; height: 1000px; position: absolute; top: 0; left: 0; animation: animateThree 10s infinite linear; background-size: 800px; filter: blur(2px); } @keyframes animateOne { 0% { background-position: 0px 0px; } 100% { background-position: 100px 650px; } } @keyframes animateTwo { 0% { background-position: 0px -100px; } 100% { background-position: 0px 650px; } } @keyframes animateThree { 0% { background-position: 0px 100px; } 100% { background-position: 300px 650px; } }
