In this article, a wavy animated text is implemented using HTML and CSS. It is one of the simplest CSS effects. For a beginner, it is one of the best examples to learn the concept of CSS pseudo-elements.
Approach: The basic idea of getting wavy texts is performed by using the combination of some CSS attributes. The main “body” part is created by using <span> tag inside <body> tag. CSS code is used to create wavy texts of the “body” part of the HTML structure.
HTML code: The following code snippet demonstrates the design of the text used for wavy effect by using HTML tags in the web page.
Final code: This example displaying the complete code to make a vertical wavy text line using HTML and CSS.
- How to make a vertical line using HTML ?
- How to create long shadow of text without using text-shadow in HTML and CSS ?
- How to create Vertical Navigation Bar using HTML and CSS ?
- Text Animation with changing the color of the text using HTML & CSS
- How to lock the vertical movement of a text canvas using Fabric.js ?
- How to lock vertical scaling of a text canvas using Fabric.js ?
- How to add default vertical scaling to a text canvas using Fabric.js ?
- How to add vertical skew to a canvas-type text using Fabric.js ?
- How to make horizontal line with words in the middle using CSS?
- CSS | text-decoration-line Property
- How to set vertical space between the list of items using CSS ?
- How to make text input non-editable using CSS?
- How to make vertical scrollable rows in bootstrap?
- How to read a file line by line using node.js ?
- CSS | vertical-align Property
- CSS | Layout - Horizontal & Vertical Align
- How to break line without using <br> tag in HTML / CSS ?
- How to wrap the text around an image using HTML and CSS ?
- How to Create a Cutout Text using HTML and CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.