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

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

Last Updated : 29 Jul, 2024

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 byusing <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 snipp et demonstrates the design of the text used for wavy effect by using HTML tags in the web page.

html

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

qwe

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

C

chalti

Improve

Article Tags :

Similar Reads

How to add lines besides a vertical text using SASS ?

In this article, we will see how to add lines besides some vertical text using SASS. Approach: The HTML code is used to depict the basic structure of the body. Here, we define a division element with a class of wrapper to contain subsequent division elements. Another division element with a class of

How to Make a Vertical Line in HTML

The vertical line in HTML can be created using border-left or border-right, often combined with the height and position properties. Nearly 85% of HTML layouts use vertical lines for visual separation, especially in navigation menus and content sections. Below is a preview of a vertical line, followe

How to Skew Text on Hover using HTML and CSS?

Skewed text animation effect can be created using HTML and CSS, this animation looks very cool and can be used in websites to make them look more dynamic, the following sections will guide on how to create the desired animation effect.First Section: In this section we will create a basic div tag whi

How to create linear gradient text using HTML and CSS ?

The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide

How to Vertically Align Text Within a Div in CSS?

Aligning text vertically within a div can enhance the visual appeal of your web design. There are various approaches to achieving vertical alignment using CSS.1. Using line-height PropertyThe line-height property is the easiest and most commonly used approach to align text within a div vertically. T