ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект на фиксированные снежинки в CSS

Эффект на фиксированные снежинки в CSS

Это анимационные снежки, которые выполнены великолепно, но только зафиксированные на одном месте, где и будет идти от них эффект. Который заключается в том, что они могут менять оттенок цвета, это становится светлее и также по размеру как небольшие, так и с присутствием анимации они увеличиваться. В представленном в материале варианте не нужно подключать скрипт.

Все делается просто, вам необходимо установить HTML код, и также под него стилистику css, где появится возможность установить фиксацию на оригинальные по дизайну снежинки, где по времени начнут изменятся.

Плюс в том, что если гость или пользователь будет читать статью, вообще участвовать в ответах, то он в этом плане практически их не заметит. Так как веб-разработчик может создать им изначальную палитру, что по умолчанию она не сильно станет отличиться от основного стиля.

Так примерно выглядит на темно синем фоне, но не забываем, что присутствует анимация.

Рассмотрим преимущество материала:

1. Снежки или снежинки изначально не мешают пользоваться функционалом на сайте.
2. Здесь можно изначально взять все снежки и выстроить по месту, это сделать в разнобой или все в одном месте.
3. Есть возможность, чтоб поставить снежинку в то место, чтоб она не закрывала элемент дизайна или функций.
4. Использовать JavaScript в данном материале не нужно.

Приступаем к установке:

HTML

Код

CSS

Код

.snemukem-neganak span::after {
  position:fixed;
  color:#c4e1f9;
  font-weight:bold;
}
.snemukem-neganak span:nth-child(even)::after {
  content: "\2744";
}
.snemukem-neganak span:nth-child(odd)::after {
  content: "\2745";
}
.snemukem-neganak span:nth-child(1)::after {
  font-size:40px;
  bottom:4%;
  left:4%;
  animation: snowzoom 2s linear infinite;
}
.snemukem-neganak span:nth-child(2)::after {
  font-size:48px;
  bottom:6%;
  right:6%;
  animation: snowzoom 3s ease-in infinite;
}
.snemukem-neganak span:nth-child(3)::after {
  font-size:32px;
  bottom:9%;
  left:43%;
  animation: snowzoom 4s linear infinite;
}
.snemukem-neganak span:nth-child(4)::after {
  font-size:45px;
  bottom:39%;
  left:20%;
  animation: snowzoom 3s ease-in-out infinite;
}
.snemukem-neganak span:nth-child(5)::after {
  font-size:42px;
  top:16%;
  left:10%;
  animation: snowzoom 3.2s ease-out infinite;
}
.snemukem-neganak span:nth-child(6)::after {
  font-size:30px;
  top:20%;
  right:10%;
  animation: snowzoom 2.2s ease infinite;
}
.snemukem-neganak span:nth-child(7)::after {
  font-size:50px;
  top:50%;
  left:50%;
  animation: snowzoom 2.4s linear infinite;
}
.snemukem-neganak span:nth-child(8)::after {
  font-size:32px;
  top:26%;
  right:28%;
  animation: snowzoom 1.9s ease-in-out infinite;
}
.snemukem-neganak span:nth-child(9)::after {
  font-size:43px;
  top:11%;
  left:58%;
  animation: snowzoom 3.2s linear infinite;
}
.snemukem-neganak span:nth-child(10)::after {
  font-size:47px;
  bottom:29%;
  right:24%;
  animation: snowzoom 2s ease infinite;
}
.snemukem-neganak span:nth-child(11)::after {
  font-size:39px;
  bottom:21%;
  left:15%;
  animation: snowzoom 3s ease-in infinite;
}
.snemukem-neganak span:nth-child(12)::after {
  font-size:29px;
  bottom:29%;
  left:39%;
  animation: snowzoom 2.8s ease-out infinite;
}
.snemukem-neganak span:nth-child(13)::after {
  font-size:23px;
  top:23%;
  left:19%;
  animation: snowzoom 2.4s ease infinite;
}
.snemukem-neganak span:nth-child(14)::after {
  font-size: 39px;
  top: 28%;
  left: 35%;
  animation: snowzoom 2.5s ease-in infinite;
}
@keyframes snowzoom {
  0% {
  transform: scale(1);
  }
  50% {
  transform: scale(2);
  }
  100% {
  transform: scale(1);
  }
}

Если сделать цветовую палитру снежков в голубом оттенке, то отлично смотрятся на светлом фоне, как уже говорил, что больше зависит от стиля портала, и последующего выставление палитры, если по умолчанию не подходит.

Источник: atuin.ru
Демонстрация

13 Декабря 2018 Просмотров: 1280

Поделиться в социальных сетях

Материал разместил

Kosten