Wave inside Text using pure CSS
Wave inside Text is one of the coolest text effects that is used for text decoration in websites. This animation is an extraordinary illustration of a wave inside the text that grabs your eye. This effect can be used to create wave inside text, UI, 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 option to divide animation time into parts/rate 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 piece of picture inside the segment are shown and part of picture outside the segment are not shown.
Below is the implementation of the above approach: