В этой статье мы покажем вам, как создать эффект анимации падения снега с помощью CSS. Там мы используем CSS “background-image: radial-gradient(4px 4px at 100px 50px, #fff , transparent)”
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Automatic Popup</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!--Stylesheets-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="snow_wrap">
<div class="snow"></div>
</div>
</body>
</html>CSS КОД:
<style>
body{
font-family: arial;
font-size: 16px;
margin: 0;
background: #fff;
color: #000;
}
.snow_wrap{
height: 100vh;
width: 100%;
background:url('bg-snow.jpeg');
background-size: cover;
background-position: center center;
overflow: hidden;
position: relative;
}
.snow, .snow:before, .snow:after {
position: absolute;
top: -650px;
left: 0;
bottom: 0;
right: 0;
background-image:
radial-gradient(4px 4px at 100px 50px, #fff , transparent),
radial-gradient(6px 6px at 200px 150px, #fff, transparent),
radial-gradient(3px 3px at 300px 250px, #fff 50%, transparent),
radial-gradient(4px 4px at 400px 350px, #fff 50%, transparent),
radial-gradient(6px 6px at 500px 100px, #fff 50%, transparent),
radial-gradient(3px 3px at 50px 200px, #fff 50%, transparent),
radial-gradient(4px 4px at 150px 300px, #fff 50%, transparent),
radial-gradient(6px 6px at 250px 400px, #fff 50%, transparent),
radial-gradient(3px 3px at 350px 500px, #fff 50%, transparent);
background-size: 650px 650px;
animation: snow 3s linear infinite;
content: "";
}
.snow:after {
margin-left: -250px;
opacity: 0.5;
filter: blur(2px);
animation-duration: 6s;
animation-direction: reverse;
}
.snow:before {
margin-left: -350px;
opacity: 0.7;
filter: blur(1px);
animation-duration: 9s;
animation-direction: reverse;
}
@keyframes snow {
to {
transform: translateY(650px);
}
}
</style>
