ZorNet.Ru — сайт для вебмастера » HTML и CSS » Освещение текста с помощью CSS-анимации

Освещение текста с помощью CSS-анимации

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

Но нужно полагать, чтоб все корректно и красиво выглядело, то как примет, ставим 25, и чтоб разрыв был аналогичен, это значит на второй знак выставляем 50, и так далее. Где можно делая разрывы, то выставить как можно знаков, что поместится не одно слово, а пробелы станут как граница.

Как пример:

Установка:

HTML

Код

CSS

Код

.osveshcheniya{
  width:535px;
  height:67px;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.osveshcheniya span{
  font-size: 43px;
  font-weight: bold;
  color: #4b4b4b;
  animation: lighting 1000ms alternate infinite ease;
}
@keyframes lighting{
  0%,85%{
  color: #4b4b4b;
  text-shadow: none;
  }
  100%{
  color:#fff200;
  text-shadow: 0 0 5px #fff200, 0 0 3px #ff9f1a;
  }
}
.osveshcheniya span:nth-child(1){
  animation-delay: 150ms;
}
.osveshcheniya span:nth-child(2){
  animation-delay: 300ms;
}
.osveshcheniya span:nth-child(3){
  animation-delay: 450ms;
}
.osveshcheniya span:nth-child(4){
  animation-delay: 600ms;
}
.osveshcheniya span:nth-child(5){
  animation-delay: 750ms;
  margin-left: 20px;
}
.osveshcheniya span:nth-child(6){
  animation-delay: 900ms;

}
.osveshcheniya span:nth-child(7){
  animation-delay: 1050ms;
}
.osveshcheniya span:nth-child(8){
  animation-delay: 1200ms;
}
.osveshcheniya span:nth-child(9){
  animation-delay: 1350ms;
}
.wrapper span:nth-child(10){
  animation-delay: 1500ms;
}
.osveshcheniya span:nth-child(11){
  animation-delay: 1550ms;
}
.osveshcheniya span:nth-child(12){
  animation-delay: 1610ms;
}
.osveshcheniya span:nth-child(13){
  animation-delay: 1680ms;
}

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

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

01 Июня 2020 Загрузок: 2 Просмотров: 1068 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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