piece of code that creates a wavy animation on text elements using CSS animations and properties.
This can add a dynamic and visually appealing touch to your web pages.
HTML Code
<div class="text-wrapper">
<h2>7CSSLibs</h2>
<h2>7CSSLibs</h2>
</div>
CSS Code
body {
background-color: black;
}
.text-wrapper h2 {
position: absolute;
font-weight: bold;
font-size: 7vw;
text-transform: uppercase;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.text-wrapper h2:nth-child(1) {
color: transparent;
-webkit-text-stroke: 2px rgb(116, 206, 220);
}
.text-wrapper h2:nth-child(2) {
color: rgb(116, 206, 220);
animation: animate 3s ease-in-out infinite;
}
@keyframes animate {
0%, 100% {
clip-path: polygon(0 49%, 20% 61%, 43% 69%, 63% 60%, 85% 66%, 100% 65%, 100% 100%, 0% 100%);
}
50% {
clip-path: polygon(0 72%, 27% 63%, 50% 44%, 75% 49%, 92% 53%, 100% 42%, 100% 100%, 0% 100%);
}
}
