How to make a vertical wavy text line using HTML and CSS ?
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.
< div class = "wavy" > < span style = "--i:1" >G</ span > < span style = "--i:2" >E</ span > < span style = "--i:3" >E</ span > < span style = "--i:4" >K</ span > < span style = "--i:5" >S</ span > < span style = "--i:6" > </ span > < span style = "--i:7" >F</ span > < span style = "--i:8" >O</ span > < span style = "--i:9" >R</ span > < span style = "--i:10" > </ span > < span style = "--i:11" >G</ span > < span style = "--i:12" >E</ span > < span style = "--i:13" >E</ span > < span style = "--i:14" >K</ span > < span style = "--i:15" >S</ span > < span style = "--i:16" >.</ span > < span style = "--i:17" >.</ span > < span style = "--i:18" >.</ span > < span style = "--i:19" >.</ span > < span style = "--i:20" >.</ span > </ div > |
Final code: This example displaying the complete code to make a vertical wavy text line using HTML and CSS.
HTML
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < style type = "text/css" > body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: rgb(6, 75, 21); } .wavy { position: relative; } .wavy span { position: relative; display: inline-block; color: #fff; font-size: 2em; text-transform: uppercase; animation: animate 2s ease-in-out infinite; animation-delay: calc(0.1s * var(--i)); } @keyframes animate { 0% { transform: translateY(0px); } 20% { transform: translateY(-20px); } 40%, 100% { transform: translateY(0px); } } </ style > </ head > < body > < div class = "wavy" > < span style = "--i:1" >G</ span > < span style = "--i:2" >E</ span > < span style = "--i:3" >E</ span > < span style = "--i:4" >K</ span > < span style = "--i:5" >S</ span > < span style = "--i:6" > </ span > < span style = "--i:7" >F</ span > < span style = "--i:8" >O</ span > < span style = "--i:9" >R</ span > < span style = "--i:10" > </ span > < span style = "--i:11" >G</ span > < span style = "--i:12" >E</ span > < span style = "--i:13" >E</ span > < span style = "--i:14" >K</ span > < span style = "--i:15" >S</ span > < span style = "--i:16" >.</ span > < span style = "--i:17" >.</ span > < span style = "--i:18" >.</ span > < span style = "--i:19" >.</ span > < span style = "--i:20" >.</ span > </ div > </ body > </ html > |
Output:
Contact Us