Text glowing cursor animation using HTMl and Css

Glowing Text Animation CSS

Table of Contents

Introduction

Today we are making a slider cursor animation glowing design text with the help of HTML and CSS. This will be fully responsive to all sizes of screens, and we will use animation to make the text glow. In this glowing text project, you can add your favorite text according to your preferences to give it an animated look. This is just an example text. You can use it on your website to show your name with animation.

Let’s make it together with the help of HTML and CSS with simplicity by following the code step by step. This will not be very complicated, you just need to focus on the animated part, which is very important to understand.

HTML

First, we will create the structure of animated, glowing text with the help of HTML. In HTML, we will create a heading in the h tag to insert the text in it to make it glow, and then we will write the text in the heading tag whatever we want; in this case, we have written our website name, for example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LayakCoder</title>
    <link rel="stylesheet" href="./glowing text.css">
</head>
<body>
    <h2 data-text="&nbsp;LayakCoder&nbsp;">&nbsp;LayakCoder&nbsp;</h2>
</body>
</html>

CSS

After making the structure of the animated glowing Glowing Cursor, we will now give it styling and responsiveness using CSS (an external stylesheet attached to the HTML file). In CSS, we will first give the background black, and then we will center the text on the screen. Then we have to give the font size and text color whatever we want. In the end, we will make it responsive.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #030303;
}

h2{
    position: relative;
    font-size: 8em;
    color: #f97878;
    letter-spacing: 0.1em;
}

h2::before{
    content: attr(data-text);
    position: absolute;
    color: #1f49ff;
    width: 350px;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #fff;
    animation: anim 8s linear infinite;
    filter: drop-shadow(0 0 5px #fff) 
    drop-shadow(0 0 10px #fff);
}

@keyframes anim{
    0%, 10%, 100%{
        width: 0;
    }
    70%, 90%{
        width: 100%;
    }
}

Animation

After making and designing the Glowing Cursor, we will now add animation to the text to make it glow with animation effects with the help of a keyframe (a CSS framework used to apply animation to an HTML page). In this animation, we will use before and after to make animations on the text.

Output of Slider Cursor Animation

Finally, we made the Slider Cursor Animation Glowing Text with animation with the help of HTML and CSS by following simple code step by step. You can make such a project to enhance our experience in web development. If you want the source code, then click on the button given below.

Text glowing cursor animation using HTMl and Css

For more explanation, click on the link given below to watch the video.

You can also check

Press the download button to download the source code of Glowing Cursor

932 B

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Posts

Quick Links