» » Снежинки CSS на сайт

Снежинки CSS на сайт

Новый год настанет ещё не скоро — больше двух месяцев до этого всеми любимого праздника, но сегодняшняя статья новогодняя. Точнее о новогоднем украшении на сайт.
Снежинки CSS на сайт

Замершие на месте снежинки

Добавить код в Дизайн-Гаджеты-Добавить HTML/JavaScript. Снежинки не падают, а стоят на месте, только уменьшаются и увеличиваются. Огромный плюс - код без скриптов, а значит не будет лишней нагрузки на сайт. 

<div class="snemukem-neganak">
  <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>
<style>.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);
  }
}</style>

Что ещё интересного в этом коде:
Снежинки это спецсимволы XTML, а значит можно установить другие и получится новое украшение сайта. К празднику Святого Валентина можно поставить символы сердечек. К 8 марта — цветочки и так далее. В коде символы отмечены синим цветом.
У символов можно менять размер и цвет. Размер меняем в строчках font-size, меняя цифровые значения на большие или меньшие. Цвет в коде я выделила красным, меняйте на свой. Можно устанавливать снежинки по своему вкусу, меняя значения left, top, bottom, right.

Примеры:
Посмотреть снежинки можно в тестовом редакторе. Добавляйте код в окошко и нажмите кнопку Просмотр.

На сайте есть статья о символах.

Ваши комментарии:

Комментарии со спамом удаляются.