• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать эффект анимации текста на чистом CSS (Анимация переливание жидкости внутри знаков текста на CSS)
Создать эффект анимации текста на чистом CSS
Kosten
Дата: Четверг, 2021-05-06, 21:29 | Сообщение 1
Оффлайн
Администраторы
Сообщений:37897
Награды: 65


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



HTML

Код
<section>
    <div class="content">
  <h2>ZORNET.RU</h2>
  <h2>ZORNET.RU</h2>
    </div>
</section>

CSS

Код
.content {
    position: relative;
}

.content h2 {
    color: #fff;
    font-size: 8em;
    position: absolute;
    transform: translate(-50%, -50%);
}

.content h2:nth-child(1) {
    color: transparent;
    -webkit-text-stroke: 2px #03a9f4;
}

.content h2:nth-child(2) {
    color: #03a9f4;
    animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
    0%,
    100% {
  clip-path: polygon(
   0% 45%,
   16% 44%,
   33% 50%,
   54% 60%,
   70% 61%,
   84% 59%,
   100% 52%,
   100% 100%,
   0% 100%
  );
    }

    50% {
  clip-path: polygon(
   0% 60%,
   15% 65%,
   34% 66%,
   51% 62%,
   67% 50%,
   84% 45%,
   100% 46%,
   100% 100%,
   0% 100%
  );
    }
}

На этом установка завершена!

Демонстрация
Прикрепления: 8871844.png(27.5 Kb) · css3-text-anima.zip(3.2 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 2021-05-06, 23:08 | Сообщение 2
Оффлайн
Администраторы
Сообщений:37897
Награды: 65


Если продолжать по анимации, что связана с текстом, то здесь подборка на текстовую анимацию на различные эффекты, которые отлично смотрятся, как на темном или светлом фоне.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать эффект анимации текста на чистом CSS (Анимация переливание жидкости внутри знаков текста на CSS)
  • Страница 1 из 1
  • 1
Поиск: