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

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.

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

Tabbar With Notification And Search Icons In Flutter
How To Design a Icons Inside Html Input Fields Using Css
How To Give Link To a Text Using Css In Html
How To Use CSS Style Transition Properties With JavaScript
How To Create a Hoverable Drop down menu using CSS
What Are The Benefits Of Image Sprites and Image gallery In Css
How To Create A Form Using CSS
How Do You Add a Shadow to Text and Text Effects In Css
How Do You Make A 2D and 3D Effect In CSS
How Do I Apply transistion In Css
How Do you Make an Animation In Css
How To Create an Active Class in pagination In CSS