Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Difficulty Level : Hard
  • Last Updated : 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :