Happy New Year 2022

HAPPY NEW YEAR WISHING WEBSITE ANIMATION USING HTML AND CSS.

Hello Readers, Welcome to my other Blog, today in this Blog I'm going to create a Happy New Year 2022 text animation wishes website using CSS .

May this year bring new happiness, new goals, new achievements, and many new inspirations to your life. Wishing you a year fully loaded with happiness. I hope that this new year will be the best year of your life. May all your hopes are fulfilled and all your dreams come true.

Video Tutorial Of Happy New Year 2022 Using HTML & CSS:

This Video tutorial is a step by step guide on how to Happy New Year 2022 text animation effect using CSS.

SOURCE CODE:

index.html

<!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.0">
    <title>HAPPY NEW YEAR 2022 - Sagar Developer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>
        <span>20</span>
        <span>22</span>
    </h1>
    <h2>
        <span style="--i:1;">H</span>
        <span style="--i:2;">a</span>
        <span style="--i:3;">p</span>
        <span style="--i:4;">p</span>
        <span style="--i:5;">y</span>
        <span style="--i:6; margin-left: 5vw;">N</span>
        <span style="--i:7;">e</span>
        <span style="--i:8;">w</span>
        <span style="--i:9; margin-left: 5vw;">Y</span>
        <span style="--i:10;">e</span>
        <span style="--i:11;">a</span>
        <span style="--i:12;">r</span>
    </h2>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Bad+Script&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Bad Script', cursive;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN76zYSCj5_K4muKJvwDL-tKcOb_RBLU3A3YhfS0fYaPd48cBOoW_6tOUV_bICVXFjStxtvu8ALWRSdOODWsPJUq52O6FrHQ_u_dLLrez8fbEA2amKKs_InaUBvF4SO7sN91bvvA1rcAc/s2560/2022+Happy+New+Year+Purple+Background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* for h1 */

h1 {
    position: relative;
    font-size: 8vw;
    display: flex;
    color: #0e3742;
}

h1 span {
    animation: text 5s infinite;
}

h1 span:nth-child(even) {
    animation-delay: 0.4s;
}

@keyframes text {
    0%, 18%, 20%, 50%, 60%, .1%, 80%, 90.1%, 92% {
        color: #0e3742;
        text-shadow: none;
    }

    18.1%, 20.1%, 30%, 50%, 60.1%, 85%, 80.1%, 90%, 92.1%, 100% {
        color: #fff;
        text-shadow: 0 0 10px #00b3ff,
            0 0 20px #00b3ff,
            0 0 40px #00b3ff,
            0 0 80px #00b3ff,
            0 0 160px #00b3ff;
    }
}

/* for h2 */

h2 {
    font-size: 10vw;
    display: flex;
    margin-top: -50px;
}

h2 span {
    animation: animate 3s linear infinite;
    animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
    0% {
        color: #fff;
        filter: blur(2px) hue-rotate(0deg);
        text-shadow: 0 0 10px #00b3ff,
            0 0 20px #00b3ff,
            0 0 40px #00b3ff,
            0 0 80px #00b3ff,
            0 0 120px #00b3ff,
            0 0 300px #00b3ff;
    }

    30%, 70% {
        color: #fff;
        filter: blur(2px) hue-rotate(360deg);
        text-shadow: 0 0 10px #00b3ff,
            0 0 20px #00b3ff,
            0 0 40px #00b3ff,
            0 0 80px #00b3ff,
            0 0 120px #00b3ff,
            0 0 200px #00b3ff;
    }

    100% {
        color: transparent;
        box-shadow: none;
        filter: blur(2px) hue-rotate(0deg);
    }
}

/* for responsive */

@media (max-width: 700px) {
    h1 {
        margin-top: -80px;
        font-size: 20vw;
    }
    h2{
        font-size: 15vw;
    }
}

Sagar Developer

Happy New Year 2022

0/Post a Comment/Comments

Post a Comment

About Us

Contact Form

Happy New Year 2022

Related Posts

0/Post a Comment/Comments

Post a Comment

Contact Form