Здесь в теме узнаем, как можно стильно создаем текст, к примеру название сайта или категорий, но главное здесь будет прикрепленный эффект, что происходит внутри букв или знаков. Это как жидкость в бутылке, где она переливается, что при открытие сайта можно сразу заметить эту анимацию.
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%
);
}
}
На этом установка завершена!
Демонстрация
