<!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 2023</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="msg">Happy New Year</div>
    <div class="year">
        <span class="first_year">
            <span class="y1">2</span>
            <span class="y2">0</span>
            <span class="y3">2</span>
        </span>
        <span class="old">3</span>
        <span class="y4 new">4</span>
        <div class="balloon"></div>
    </div>
    <div class="firework" id="firework1">
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
    </div>
    <div class="firework" id="firework2">
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
    </div>
    <div class="firework" id="firework3">
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
    </div>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&family=Poppins:wght@900&display=swap");

*,
*:after,
*:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}

body {
  background-color: #1a1818;
  overflow: hidden;
  height: 100vh;
}

.msg {
  width: 100%;
  font-family: "Bilbo Swash Caps", cursive;
  font-size: 100px;
  font-weight: bolder;
  color: #ff00c3;
  text-align: center;
  position: absolute;
  top: 50%;
  opacity: 0;
  animation: message 2s ease-in-out 6s forwards;
}

@keyframes message {
  0% {
    opacity: 0;
    margin-top: 0;
  }
  100% {
    opacity: 1;
    margin-top: -200px;
  }
}

.y1 {
  color: #fff;
  animation: y1colorful 2s ease-in-out 5.75s forwards;
}
.y2 {
  color: #fff;
  animation: y2colorful 2s ease-in-out 5.75s forwards;
}
.y3 {
  color: #fff;
  animation: y3colorful 2s ease-in-out 5.75s forwards;
}
.y4 {
  color: #fff;
  animation: y4colorful 2s ease-in-out 5.75s forwards;
}

@keyframes y1colorful {
    0% {
        color: #fff;
    }
    100% {
        color: orange;
    }
}
@keyframes y2colorful {
    0% {
        color: #fff;
    }
    100% {
        color: #4cdde2;
    }
}
@keyframes y3colorful {
    0% {
        color: #fff;
    }
    100% {
        color: #ff94a6;
    }
}
@keyframes y4colorful {
    0% {
        color: #fff;
    }
    100% {
        color: yellow;
    }
}

.old {
  color: #fff;
  position: absolute;
  top: 0%;
  animation: old_animation 2.5s ease-in-out 4s forwards;
  margin-left: -80px;
}

@keyframes old_animation {
  0% {
    top: 0%;
  }
  100% {
    top: -250%;
  }
}

.year {
  position: absolute;
  top: 450px;
  width: 100%;
  text-align: center;
}

.year > span {
  font-size: 175px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  letter-spacing: -12px;
}

.first_year {
  margin-right: 100px;
}

.new {
  position: absolute;
  right: -100px;
  animation: new_animation 5s ease-in-out 1.5s forwards;
}

@keyframes new_animation {
  0% {
    right: -100px;
  }
  40% {
    right: 400px;
  }
  90% {
    right: 400px;
  }
  100% {
    right: 520px;
    color: yellow;
  }
}

.balloon {
  width: 100px;
  height: 120px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 50%;
  right: -100px;
  margin-top: -285px;
  animation: balloon_animation 5s ease-in-out 1.5s forwards;
}

.balloon::after {
  content: "";
  width: 4px;
  height: 100px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  margin-left: -2px;
  bottom: -100px;
}

.balloon::before {
  content: "";
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #fd3553 transparent;
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
}

@keyframes balloon_animation {
  0% {
    right: -100px;
  }
  40% {
    right: 380px;
  }
  50% {
    right: 530px;
    top: 50%;
  }
  100% {
    right: 530px;
    top: -200%;
  }
}

.firework {
    position: relative;
    opacity: 0;
    animation: show_fireworks 2s ease-in-out 5s forwards;
}

@keyframes show_fireworks {
    0% {
        opacity: 0;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.cracker {
    position: absolute;
    width: 4px;
    height: 80px;
    transform-origin: 50% 100%;
    overflow: hidden;
}

.cracker::before {
    content: '';
    background-color: gold;
    height: 40px;
    position: absolute;
    left: 0;
    right: 0;
    animation: fire 2s ease-in-out infinite;
}

@keyframes fire {
    0% {
        top: 100%;
    }
    25% {
        top: 50%;
    }
    50% {
        top: -25%;
    }
    75% {
        top: -50%;
    }
    100% {
        top: -50%;
    }
}

.cracker:nth-child(1) {
    transform: rotate(0deg) translateY(-15px);
}
.cracker:nth-child(2) {
    transform: rotate(30deg) translateY(-15px);
}
.cracker:nth-child(3) {
    transform: rotate(60deg) translateY(-15px);
}
.cracker:nth-child(4) {
    transform: rotate(90deg) translateY(-15px);
}
.cracker:nth-child(5) {
    transform: rotate(120deg) translateY(-15px);
}
.cracker:nth-child(6) {
    transform: rotate(150deg) translateY(-15px);
}
.cracker:nth-child(7) {
    transform: rotate(180deg) translateY(-15px);
}
.cracker:nth-child(8) {
    transform: rotate(210deg) translateY(-15px);
}
.cracker:nth-child(9) {
    transform: rotate(240deg) translateY(-15px);
}
.cracker:nth-child(10) {
    transform: rotate(270deg) translateY(-15px);
}
.cracker:nth-child(11) {
    transform: rotate(300deg) translateY(-15px);
}
.cracker:nth-child(12) {
    transform: rotate(330deg) translateY(-15px);
}

#firework1 {
    left: 25%;
    top: 50%;
    transform: scale(1);
}

#firework2 {
    left: 50%;
    top: 75%;
    transform: scale(0.5);
}

#firework3 {
    left: 80%;
    top: 15%;
    transform: scale(1.5);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.