ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимационный эффект волны воды на CSS3

Анимационный эффект волны воды на CSS3

Интересное решение с текстовой анимации для волны воды с использованием HTML + CSS, где внутри знаков реально смотрится волны на воде. Где мы изначально создаем текст при помощи HTML, а затем нам остается добавить красивую анимацию связанною с водой с помощью CSS. Если ранее можно было такую анимацию создать при SVG, то сейчас на CSS3 все отлично получается, но главное выглядит красиво и оригинально.

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

Так выглядит при открытие страницы, это к примеру, ведь оформление не кто не запрещает создавать, здесь главное идет анимация, а вокруг можно все красиво оформить.

Текстовая анимация волны воды с использованием CSS

Анимация волны воды на чистом CSS + HTML

Приступаем к установке:

HTML

Код

<section>
  <div class="maivunce">
  <h2>ZORNET.RU</h2>
  <h2>ZORNET.RU</h2>
  </div>
</section>

CSS

Код

.maivunce {
  position: relative;
}

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

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

.maivunce 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%
  );
  }
}

Теперь вам известно, как можно задействовать данный коды, но также узнали все элементы для создание данной анимации, которая теперь работает эта чистом CSS-анимация для текста текста.

А значит применение возможно большим, где я с начало предложил для логотипа, но не исключаю, что для стильного оформление статьи, где на прямую качается тематика с водой или дикостями.

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

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

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

СКАЧАТЬ

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

Kosten

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