WP

WP-Recall

Yworld Prime Designer
Дополнение к PrimeForum

WP

WP-Recall

Yworld PF Motivation
Дополнение к PrimeForum

WP

WP-Recall

Prime Yworld PRO
Дополнение к PrimeForum

Украшаем логотип сайта к новогодним праздникам

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

Обычно логотип выводится в файле header.php, сразу под логотип добавить:

<div class="snow">
<div class="flake1"></div>
<div class="flake2"></div>
<div class="flake3"></div>
<div class="flake4"></div>
<div class="flake5"></div>
<div class="flake6"></div>
<div class="flake7"></div>
<div class="flake8"></div>
</div>

В файл стилей вашей темы:

/* снег  */
.snow {
  position: absolute;
    display: block;
  width: 150px;
  top:0;
left:6%;
}
.flake1 {
  position: relative;
  width:2px;
  height:2px;
  background: white;
    opacity: 0;
  transform-origin:0px 0px;
  animation-name: Snow;
animation-duration:2.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.flake2 {
  position: relative;
  left:5px;
  width:2px;
  height:2px;
  background: white;
    opacity: 0;
  transform-origin:0px 0px;
  animation-name: Snow;
animation-duration:2.7s;
  animation-delay:0.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.flake3 {
  position: relative;
  left:-10px;
  width:2px;
  height:2px;
  background: white;
    opacity: 0;
  transform-origin:0px 0px;
  animation-name: Snow;
animation-duration:2.3s;
  animation-delay:0.4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.flake4 {
  position: relative;
  left:25px;
  width:2px;
  height:2px;
  background: white;
    opacity: 0;
  transform-origin:0px 0px;
  animation-name: Snow;
animation-duration:2.7s;
  animation-delay:0s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.flake5 {
  position: relative;
  left:-25px;
  width:2px;
  height:2px;
  background: white;
    opacity: 0;
  transform-origin:0px 0px;
  animation-name: Snow;
animation-duration:2.4s;
  animation-delay:1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
  
}
.flake6 {
  position: relative;
  left:9px;
  width:2px;
  height:2px;
  background: white;
    opacity: 0;
  transform-origin:0px 0px;
  animation-name: Snow;
animation-duration:2.7s;
  animation-delay:1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.flake7 {
  position: relative;
  left:-15px;
  width:2px;
  height:2px;
  background: white;
    opacity: 0;
  transform-origin:0px 0px;
  animation-name: Snow;
animation-duration:2.2s;
  animation-delay:1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.flake8 {
  position: relative;
  left:35px;
  width:2px;
  height:2px;
  background: white;
  opacity: 0;
  transform-origin:0px 0px;
  animation-name: Snow;
animation-duration:2.7s;
  animation-delay:1.4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes Snow {
0% {
transform:translateY(0px);
  opacity:0;
}
50% {
  transform:translateY(25px);
  opacity: 1;
}
  100% {
  transform:translateY(45px);
  opacity: 0.3;
}
}

Позиционирование относительно расположения вашего логотипа, производить тут:

.snow {
  position: absolute;
    display: block;
  width: 150px;
  top:0;
left:6%;
}

Все, сохранить, удалить кеш и наслаждаться 🙂
Пример работы можно посмотреть тут на сайте у логотипа. Надеюсь вам пригодится и будет полезно. Мне такое решение в самый раз, так как я не любитель делать какие то глобальные праздничные изменения на сайте.

Автор этого решения Jeff

5

Автор публикации: Игорь logo

111 публикаций 100500 Идей :)

Весь спектр SEO услуг, реклама, продвижение в социальных сетях. Изготовление сайтов.

Обратится в PM Отзывы Подписаться

2 Комментария “Украшаем логотип сайта к новогодним праздникам

Ответить