Вместо того, чтобы стирать слезы с лица, сотрите из жизни людей, которые заставили вас плакать.
25-октября-2022, 23:39 359 0
Добрый вечер уважаемые вебмастера. Бродил в сети сегодня в поисках красивых новогодних украшений для сайта и наткнулся в тоже время на очень простой и красивый эффект фиксированных снежинок для сайта. Кстати снежинки выполнены на CSS и не используют никаких скриптов как в предыдущем эффекте падающего снега. Эффект простой , но красивый, снежинки зафиксированы на веб-страничке и просто меняют свой размер.
Установка заключается в размещение кода внизу страницы перед закрывающимся тегом body, а так же добавлением стилей. Как всегда на DLE я устанавливаю все скрипты с помощью раздела рекламных материалов. Кстати можно настроить положение, количество и цвет снежинок. Дерзайте!
HTML
<div class="fixed-snow">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div
CSS
.fixed-snow span::after {
position:fixed;
color:#BFE2FF;
font-weight:bold;
pointer-events: none;
z-index: 1000;
}
.fixed-snow span:nth-child(even)::after {
content: "\2744";
}
.fixed-snow span:nth-child(odd)::after {
content: "\2745";
}
.fixed-snow span:nth-child(1)::after {
font-size:40px;
bottom:4%;
left:4%;
animation: snowzoom 2s linear infinite;
}
.fixed-snow span:nth-child(2)::after {
font-size:48px;
bottom:6%;
right:6%;
animation: snowzoom 3s ease-in infinite;
}
.fixed-snow span:nth-child(3)::after {
font-size:32px;
bottom:10%;
left:45%;
animation: snowzoom 4s linear infinite;
}
.fixed-snow span:nth-child(4)::after {
font-size:44px;
bottom:40%;
left:20%;
animation: snowzoom 3s ease-in-out infinite;
}
.fixed-snow span:nth-child(5)::after {
font-size:42px;
top:16%;
left:8%;
animation: snowzoom 3.2s ease-out infinite;
}
.fixed-snow span:nth-child(6)::after {
font-size:30px;
top:20%;
right:8%;
animation: snowzoom 2.2s ease infinite;
}
.fixed-snow span:nth-child(7)::after {
font-size:50px;
top:50%;
left:50%;
animation: snowzoom 2.4s linear infinite;
}
.fixed-snow span:nth-child(8)::after {
font-size:32px;
top:26%;
right:28%;
animation: snowzoom 1.8s ease-in-out infinite;
}
.fixed-snow span:nth-child(9)::after {
font-size:42px;
top:12%;
left:58%;
animation: snowzoom 3.2s linear infinite;
}
.fixed-snow span:nth-child(10)::after {
font-size:46px;
bottom:30%;
right:24%;
animation: snowzoom 2s ease infinite;
}
.fixed-snow span:nth-child(11)::after {
font-size:38px;
bottom:22%;
left:14%;
animation: snowzoom 3s ease-in infinite;
}
.fixed-snow span:nth-child(12)::after {
font-size:28px;
bottom:28%;
left:40%;
animation: snowzoom 2.8s ease-out infinite;
}
.fixed-snow span:nth-child(13)::after {
font-size:22px;
top:24%;
left:20%;
animation: snowzoom 2.4s ease infinite;
}
.fixed-snow span:nth-child(14)::after {
font-size:42px;
top:30%;
left:38%;
animation: snowzoom 2.4s ease-in infinite;
}
@keyframes snowzoom {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}