Snow Falling Effects Play by Codes
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Snowfall Animation</title>
</head>
<body>
<section>
<div class="snow snow1"></div>
<div class="snow snow2"></div>
<div class="snow snow3"></div>
</section>
<a id="subscribe-link" target="_blank" href="https://programming387.blogspot.com/">Follow & Share</a>
</body>
</html>
CSS Code
body {
margin: 0;
padding: 0;
}
section {
position: relative;
background: url(https://i.pinimg.com/originals/49/2e/41/492e4123a69fd8a46a099f26947a1433.jpg);
background-size: cover;
width: 100%;
height: 100vh;
overflow: hidden;
}
.snow {
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
background: url(https://avatanplus.com/files/resources/original/5673cc965ba04151b4572b67.jpg);
mix-blend-mode: screen;
}
.snow1 {
animation: animateSnow1 15s linear infinite;
}
.snow2 {
animation: animateSnow2 10s linear infinite;
}
.snow3 {
animation: animateSnow3 15s linear infinite;
}
@keyframes animateSnow1 {
0% {
background-position: 0 0;
}
100% {
background-position: 800px 450px;
}
}
@keyframes animateSnow2 {
0% {
background-position: 0 0;
filter:blur(2px);
}
100% {
background-position: 800px 450px;
filter:blur(2px);
}
}
@keyframes animateSnow3 {
0% {
background-position: 0 0;
transform: scale(5);
}
100% {
background-position: 0 450px;
transform: scale(5);
}
}
#subscribe-link
{
position: fixed;
top: 10px;
right: 10px;
color: #fff;
font-size: 13px;
text-align: center;
text-decoration: none;
padding: 5px 7px;
background-color: #FF0000;
border-radius: 2px;
z-index: 125;
font-family: arial;
}
Output
Posts
37 Comments
Awesome mausam
ReplyDeletePerfect
ReplyDeletePerfect
ReplyDeletePerfect
ReplyDeletePerfect
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteExcellent
ReplyDeleteAmazing
ReplyDeleteExcellent
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteAttractive
ReplyDeleteAttractive
ReplyDeleteAttractive
ReplyDeleteAttractive
ReplyDeleteAttractive
ReplyDeleteFabulous
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeleteWonderful
ReplyDeleteWonderful
ReplyDeleteWonderful
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDelete