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

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

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

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

Как пример:

Красивый блик для текста на CSS3

Установка:

HTML

Код
<div class="osveshcheniya">
  <span>С</span>
  <span>А</span>
  <span>И</span>
  <span>Т</span>
  <span>Z</span>
  <span>O</span>
  <span>R</span>
  <span>N</span>
  <span>E</span>
  <span>T</span>
  <span>.</span>
  <span>R</span>
  <span>U</span>
  </div>

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;
}

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

Демонстрация
2020-06-01 Просмотров: 269 Комментарий: (0)

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

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

Оставь свой отзыв

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