How To Animate a Straight Line In Linear Motion Using CSS ?

admin_img Posted By Bajarangi soft , Posted On 13-10-2020

The linear-gradient is a kind of text-styling in which the text is filled with linear-gradient color codes. These kinds of effects are generally used in dark-themed websites or apps to make the text look attractive and bold. They are almost suitable for dark themes and do not go well with the lighter themes.

Create  Straight Line  In Linear Motion

Approach: Please refer linear gradient() method to sreate a gradient background and then use webkit properties to overlay that background with our text.
HTML Code: In the following section, the text used for demonstration is wrapped inside h1 tag.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
            "width=device-width, initial-scale=1.0">
    <title>Gradient Background Animation</title>
</head>

<body>
<section>
    <div>
        <h2>BAJARANGI SOFT</h2>
        <p>Gradient background Animation</p>
    </div>
</section>
</body>

</html>
CSS Code: For CSS code, please follow the steps given below.
  • Step 1: Apply a basic background to the body tag and align the text to center of the page.
  • Step 2: Do some basic styling like font-size and family etc.
  • Step 3: Apply the linear gradient property with any colors of your choice.
  • Step 4: Now apply webkit properties, the first one will make the whole gradient-background transparent and the second property will fill the text with the gradient background.
Note: You can apply some shadow to the text to give it a darker or matte finishing kind of look.
<style>
    body {
        margin: 0;
        padding: 0;
        animation: effect 3s linear infinite;
    }

    section {
        width: 100%;
        height: 100vh;
    }

    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3em;
    }

    h2 {
        text-align: center;
    }

    @keyframes effect {
        0% {
            background: linear-gradient(#008000, #00FF00);
        }

        50% {
            background: linear-gradient(#220080, #0084ff);
        }

        100% {
            background: linear-gradient(#e78f3c, #ff4800);
        }
    }
</style>
Complete Code: It is the combination of the above two sections of code.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
            "width=device-width, initial-scale=1.0">
    <title>Gradient Background Animation</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        animation: effect 3s linear infinite;
    }

    section {
        width: 100%;
        height: 100vh;
    }

    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3em;
    }

    h2 {
        text-align: center;
    }

    @keyframes effect {
        0% {
            background: linear-gradient(#008000, #00FF00);
        }

        50% {
            background: linear-gradient(#220080, #0084ff);
        }

        100% {
            background: linear-gradient(#e78f3c, #ff4800);
        }
    }
</style>
<body>
<section>
    <div>
        <h2>BAJARANGI SOFT</h2>
        <p>Gradient background Animation</p>
    </div>
</section>
</body>

</html>

Related Post