Happy New Year 2023 Using HTML

on

 Happy New Year Using HTML 


Source Code Bellow:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.2">
    <title>Text Animation</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #white;
        }
        h3{
            position: absolute;
            top: 10%;
            left: 20%;
            font-size: 80px;
            color: #161616;
            -webkit-text-stroke: 0.3vw #212227;
            font-family: verdana;
        }
        h3::before{
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            color: rgb(0, 255, 21);
            -webkit-text-stroke: 0vw #383d52;
            border-right: 2px solid rgb(0, 255, 21);
            overflow: hidden;
            animation: animate 6s linear infinite;
        }
        @keyframes animate{
            0%,10%,100%{
                width: 0;
            }
            70%,90%{
                width: 100%;
            }
        }
        h2{
            position: absolute;
            top: 30%;
            left: 40%;
            font-size: 100px;
            color: #161616;
            -webkit-text-stroke: 0.3vw #212227;
            font-family: verdana;
        }
        h2::before{
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            color: rgb(255, 230, 0);
            -webkit-text-stroke: 0vw #383d52;
            border-right: 2px solid rgb(255, 230, 0);
            overflow: hidden;
            animation: animate 6s linear infinite;
        }
        @keyframes animate{
            0%,10%,100%{
                width: 0;
            }
            70%,90%{
                width: 100%;
            }
        }
        h1{
            position: absolute;
            top: 55%;
            left: 32%;
            font-size: 150px;
            color: #161616;
            -webkit-text-stroke: 0.3vw #212227;
            font-family: verdana;
        }
        h1::before{
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            color: red;
            -webkit-text-stroke: 0vw #383d52;
            border-right: 2px solid red;
            overflow: hidden;
            animation: animate 6s linear infinite;
        }
        @keyframes animate{
           10%,10%,100%{
                width: 0;
            }
            70%,90%{
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <h3 data-text="HAPPY_NEW">HAPPY_NEW</h3>
    <h2 data-text="YEAR">YEAR</h2>
    <h1 data-text="2023">2023</h1>
    <h4 
<a href="https://www.facebook.com/profile.php?id=100008680869353&mibextid=ZbWKwL" class="author">Sourav Pramanik</a>
<br/>
<a href="https://youtube.com/@YouTubeTechOfficial"class="author">Youtube Tech</a>
</h4>
</body>
</html>

Result:



Comments

Post a Comment