ZorNet.Ru — сайт для вебмастера » HTML и CSS » Волнистый текст при помощи анимации CSS3

Волнистый текст при помощи анимации CSS3

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

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

HTML

Код

CSS

Код

h1 {
  height: 98px;
}

h1 span {
  position: relative;
  top: 19px;
  display: inline-block;
  animation: bounce .5s ease infinite alternate;
  font-family: 'Titan One', cursive;
  font-size: 75px;
  color: #fbf5f5;
  text-shadow: 0 1px 0 #d2cece,
  0 2px 0 #d2cece,
  0 3px 0 #d2cece,
  0 4px 0 #d2cece,
  0 5px 0 #d2cece,
  0 6px 0 transparent,
  0 7px 0 transparent,
  0 8px 0 transparent,
  0 9px 0 transparent,
  0 10px 10px rgba(0, 0, 0, .4);
}

h1 span:nth-child(2) { animation-delay: .1s; }
h1 span:nth-child(3) { animation-delay: .2s; }
h1 span:nth-child(4) { animation-delay: .3s; }
h1 span:nth-child(5) { animation-delay: .4s; }
h1 span:nth-child(6) { animation-delay: .5s; }
h1 span:nth-child(7) { animation-delay: .6s; }
h1 span:nth-child(8) { animation-delay: .7s; }

@keyframes bounce {
  100% {
  top: -20px;
  text-shadow: 0 1px 0 #CCC,
  0 2px 0 #CCC,
  0 3px 0 #CCC,
  0 4px 0 #CCC,
  0 5px 0 #CCC,
  0 6px 0 #CCC,
  0 7px 0 #CCC,
  0 8px 0 #CCC,
  0 9px 0 #CCC,
  0 50px 25px rgba(0, 0, 0, .2);
  }
}

PS - изменение скорости волны зависит от функций bounce .5s, где чем выше, то медленнее анимация становится.

Демонстрация:

03 Марта 2018 Просмотров: 2690 Комментариев: (0)

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

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

Kosten

Комментарии: 0