Illuminate Your Text: Tubelight Text Animation with HTML and CSS

Rayen

Dive into the realm of luminous creativity with our Tubelight Text Animation tutorial, where we'll unveil the secrets of bringing your text to life using the power of HTML and CSS. This captivating effect adds a dynamic glow to your text, capturing the attention of your audience with its mesmerizing allure.




Step 1: HTML Markup:

Set the stage for your Tubelight Text Animation by structuring your HTML to include the text element you wish to illuminate. Define the container and the text element, providing the canvas for your luminous masterpiece.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glow Text Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 contenteditable="true">hello</h1>
</body>
</html>

Step 2: Styling with CSS:

Elevate your text animation with mesmerizing styles using CSS. Customize the appearance and add animations to achieve the radiant glow of a tubelight, captivating your audience with its luminous allure.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #07252d;

}
h1 {
    position: relative;
    font-size: 6rem;
    letter-spacing: 15px;
    color: #0e3742;
    text-transform: uppercase;
    width: 100%;
    text-align: center;

    outline: none;
    line-height: 4.1rem;

    -webkit-box-reflect: below 0px linear-gradient(#00000000,#0000000c, #00000036, #000);
    animation: anime 5s linear infinite;
}

@keyframes anime {
    0%,
    4.9%,
    10%,
    20%,
    23%,
    45%,
    59%,
    70%,
    90%,
    93%
    {
        color: #0e3742;
        text-shadow: none;
    }
  
    5%,
    8%,
    15%,
    25%,
    44%,
    60%,
    71%,
    85%,
    100%
    {
        color: #fff;
        text-shadow: 
            0 0 10px #03bcf4,
            0 0 20px #03bcf4,
            0 0 40px #03bcf4,
            0 0 80px #03bcf4,
            0 0 160px #03bcf4
        ;
    }
}

the Tubelight Text Animation project illuminates your text with an enchanting glow, captivating your audience with its radiant allure. With the magic of HTML and CSS, you can effortlessly infuse your text with luminous brilliance, enhancing the visual appeal of your website.


0 Comments