• Страница 1 из 1
  • 1
Общий форум » Самоучитель HTML и CSS » Коды HTML для сайта » Эффекты заголовка для тени при наведении CSS
Эффекты заголовка для тени при наведении CSS
Kosten
Дата: Воскресенье, 10.12.2017, 00:02 | Сообщение 1
Администраторы
Сообщений:16662
Награды: 55


Привлекательный и оригинальный эффект при наведение на знаки, буквы, где они начинают движение. Также все знаки имеют свой стиль, что под гамму цвета и выстроены в визуальном эффекте, что похоже в 3D, где можно реализовать на разных тематических сайтах.

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

Так смотрится по умолчанию:



Здесь установка:

Ставим там где хотите видеть:

Код
<h1>
  <span>Z</span><span>O</span><span>R</span><span>N</span><span>E</span><span>T</span><span> </span><span>Н</span><span>А</span><span> </span><span>U</span><span>C</span><span>O</span><span>Z</span>
</h1>


CSS:

Код
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: beige
}
h1 {
  font-family: 'Prosto One', cursive;
  font-size: 3em;
}
h1 span {
  display: inline-block;
}
body:hover span {
  animation: bounce .6s;
}
@keyframes bounce {
  0%, 100% {
    transform: translate(0);
  }
  25% {
    transform: rotateX(20deg) translateY(2px) rotate(-3deg);
  }
  50% {
    transform: translateY(-20px) rotate(3deg) scale(1.1);  
  }
}
span:nth-child(4n) {
  color: hsl(50, 75%, 55%);
  text-shadow: 1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%);
}
span:nth-child(4n-1) {
  color: hsl(135, 35%, 55%);
  text-shadow: 1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%);
}
span:nth-child(4n-2) {
  color: hsl(155, 35%, 60%);
  text-shadow: 1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%);
}
span:nth-child(4n-3) {
  color: hsl(30, 65%, 60%);
  text-shadow: 1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%);
}
h1 span:nth-child(2){ animation-delay:.05s; }
h1 span:nth-child(3){ animation-delay:.1s; }
h1 span:nth-child(4){ animation-delay:.15s; }
h1 span:nth-child(5){ animation-delay:.2s; }
h1 span:nth-child(6){ animation-delay:.25s; }
h1 span:nth-child(7){ animation-delay:.3s; }
h1 span:nth-child(8){ animation-delay:.35s; }
h1 span:nth-child(9){ animation-delay:.4s; }
h1 span:nth-child(10){ animation-delay:.45s; }
h1 span:nth-child(11){ animation-delay:.5s; }
h1 span:nth-child(12){ animation-delay:.55s; }
h1 span:nth-child(13){ animation-delay:.6s; }
h1 span:nth-child(14){ animation-delay:.65s; }


Просмотр демонстраций:
Прикрепления: 0975053.png(18.2 Kb)
Страна: (RU)
Общий форум » Самоучитель HTML и CSS » Коды HTML для сайта » Эффекты заголовка для тени при наведении CSS
  • Страница 1 из 1
  • 1
Поиск: