« Радужный прожектор для текста на чистом CSS »

Описание материала:

Предлагаем вашему вниманию радужный прожектор для текста, с использованием стилей CSS и HTML кода. Данный текст может хорошо подойти под логотип или под другие нужды вашего сайта. В нашем варианте используется всего один class стилей, под названием ufive_pr. Шрифт используемый у нас в демонстрации, относится к семейству Teko, ссылку на его подключение будет чуть ниже. Размер шрифта составляет 170px, его можно будет изменить в CSS, так же как и шрифт, и всё остальное.

Установка:

Подключаем шрифт Teko:

Код
<link href="https://fonts.googleapis.com/css?family=Teko:700&display=swap" rel="stylesheet">


HTML код:
Код
<span class="ufive_pr" data-text="ufive.ru">ufive.ru</span>


CSS код:
Код
.ufive_pr {
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
  font-size: 170px;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0;
  min-height: calc(100vh - 16px);
  position: relative;
  color: #000;
}

.ufive_pr:before {
  content: attr(data-text);
  position: absolute;
  background: linear-gradient(
  #f70000,
  #f89200,
  #f8f501,
  #038f00,
  #0168f8,
  #a200f7
  );
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 90%;
  line-height: 0.9;
  clip-path: ellipse(120px 120px at -2.54% -9.25%);
  animation: swing 5s infinite;
  animation-direction: alternate;
}

@keyframes swing {
  0% {
  clip-path: ellipse(120px 120px at -2.54% -9.25%);
  }
  50% {
  clip-path: ellipse(120px 120px at 49.66% 64.36%);
  }
  100% {
  clip-path: ellipse(120px 120px at 102.62% -1.61%);
  }
}


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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 78


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

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