! Сегодня

Главная » Web и Технологии » Простые фиксированные снежинки для сайта на CSS

Простые фиксированные снежинки для сайта на CSS

Умей ценить того кто без тебя не может, и не гонись за тем, кто счастлив без тебя!

25-октября-2022, 23:39   353   0

Простые фиксированные снежинки для сайта на CSS

Добрый вечер уважаемые вебмастера. Бродил в сети сегодня в поисках красивых новогодних украшений для сайта  и наткнулся в тоже время на очень простой и красивый эффект фиксированных снежинок для сайта. Кстати снежинки выполнены на 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);
    }
}

Поделиться

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Спутник земли ?

Редакторы выбирают

Web и Технологии