How to make a vertical wavy text line using HTML and CSS ? - GeeksforGeeks

09 Sep, 2020
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>
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?