• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Анимация эффекта с появлением текста на CSS (Анимация с появлением текста на CSS Animations)
Анимация эффекта с появлением текста на CSS
Kosten
Дата: Среда, 2018-12-26, 22:07 | Сообщение 1
Администраторы
Сообщений:20363
Награды: 56


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



HTML

Код
<p>ZorNet.Ru - портал для вебмастера</p>


CSS

Код
p {
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 25px;
  letter-spacing: 5px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 75%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}


Примечание: не забываем, что такие эффекты, как здесь представлен, будет корректно работать только в обновленных браузерах.

Демонстрация
Прикрепления: 8482443.png(8.6 Kb) · shining-text-an.zip(1.7 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Анимация эффекта с появлением текста на CSS (Анимация с появлением текста на CSS Animations)
  • Страница 1 из 1
  • 1
Поиск: