Wave inside Text is one of the coolest text effects that is used for text decoration on websites. This animation is an extraordinary illustration of a wave inside the text that grabs your eye. This effect can be used to create waves inside the text, UI, and water wave effect on Text.
Approach: The methodology is to put animation on 2nd child using @keyframes, here we target the 2nd child of the body by h5:nth-child(2) and put animation inside it, now for wave-like animation, we need to use the clip-path property of CSS and now by this property we shape the polygon path for wave-like structure. Now let’s understand some basic concepts of CSS like @keyframes, n-th child property, and clip-path property:
- nth-child property: The :nth-child() selector in CSS is used to match the elements based on their position in a group of siblings.
- @keyframes: The @keyframes property is utilized to set animations utilizing CSS and give the option to divide animation time into parts/rates and play out an animation that is determined for that piece of the entire term of the animation.
- clip-path property: The clip-path property of CSS is utilized to cut the specific segment of the picture to such an extent that pieces of picture inside the segment are shown and part of the picture outside the segment is not shown.
Example: Below is the implementation of the above approach:
<!DOCTYPE html><html>
<head>
<title>Wave inside Text Animation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Giving 1st child(first text in body)
basic transparent color and border */
h5:nth-child(1) {
color: transparent;
-webkit-text-stroke: 1px green;
}
/* Giving 2nd child(second text in body)
green colour along with animation property */
h5:nth-child(2) {
color: rgb(10, 124, 16);
animation: animate 7s ease-in-out infinite;
}
h5 {
top: 50%;
text-transform: uppercase;
position: absolute;
font-family: 'Segoe UI', Tahoma,
Geneva, Verdana, sans-serif;
transform: translate(calc(50vw - 50%), -55%);
font-size: 2em;
}
/* giving animation to 2nd child using @keyframes
and making wave like path using clip-path property */
@keyframes animate {
0%,
100% {
clip-path: polygon(0 45%, 6% 38%, 20% 27%,
38% 24%, 40% 47%, 49% 64%, 51% 72%,
74% 78%, 79% 75%, 100% 67%, 100% 100%,
0 100%);
}
50% {
clip-path: polygon(0 59%, 5% 71%, 24% 86%,
34% 71%, 41% 64%, 41% 46%, 51% 35%,
74% 21%, 89% 35%, 100% 42%, 100% 100%,
0 100%);
}
}
</style>
</head>
<body>
<h5>GeeksForGeeks</h5>
<h5>GeeksForGeeks</h5>
</body>
</html>
|
Output: