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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Final code: This example displaying the complete code to make a vertical wavy text line using HTML and CSS.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right



Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.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.