6 февр. 2024

Как сделать блик на тексте в конструкторе сайтов Craftum

Добавление блика на тексте

See the Pen Shining Text Animation Effects by Алексей Тимофеев (@aeeaakmc-the-scripter) on CodePen.

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

Настройка CSS для блоков

В настройки страницы или сайта размещаем код который написан ниже.

Перейдите в настройки блока, добавить CSS-класс и указать его название bill

  1. Добавьте на страницу блок из категории «Заголовок», например title-01.

  2. Перейдите в настройки блока и во вкладке «Контент» кликните на раздел CSS.

  3. В поле Class Name задайте название класса, bill

  4. Добавьте блок «HTML-код» из категории «Другое», а если у вас дизайн блок то можно прямо в него разместить элемент кода.

  5. Скопируйте код ниже, вставьте его в блок и опубликуйте страницу.
    Готово!

<style>
.bill {
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  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%;
  }
}
</style>



Оставь комментарий первым



Craftum Создано на конструкторе сайтов Craftum