Happy New Year 2026

AI Overview: Happy New Year 2026 Project

This project is an animated digital greeting card designed to celebrate the transition into the year 2026. It features a smooth visual sequence where the year "2025" changes into "2026," followed by a "Happy New Year" message and a celebratory fireworks display. The entire project is built using only HTML and CSS, showcasing how complex animations can be created without the need for JavaScript.

The structure of the project relies on HTML div and span elements to represent the numbers, a balloon, and the fireworks. The "202" part of the year remains static, while the "5" and "6" are placed in separate spans so they can be animated independently. This allows the old year to slide out of view while the new year arrives.

<div class="ano_novo">
  <span>202</span>
  <span class="seis">5</span>
  <span class="sete">6</span>
  <div class="balao"></div>
</div>

The HTML code above separates the digits of the year so that the "5" and "6" can be animated individually to create the transition effect.

The logic of the project is handled entirely through CSS @keyframes and animation delays. By timing different elements—such as the balloon's flight, the number swap, and the fireworks—the project creates a scripted movie-like experience. For example, the "Happy New Year" text is set with an 7-second delay, ensuring it only appears after the year has successfully changed.

.feliz {
  font-family: 'Pacifico', cursive;
  opacity: 0;
  animation: vem_feliz 2s ease-in-out 7s forwards;
}

This CSS snippet ensures the "Happy New Year" message starts invisible and only begins its 2-second fade-in animation after a 7-second delay.

The fireworks effect is achieved using nested div elements and pseudo-elements (:before and :after). Each firework "spark" is a small line that expands and fades out. The CSS uses transform: rotate() to distribute these sparks in a circle, creating the illusion of an explosion when the solta_fogos (launch fireworks) animation triggers.

@keyframes solta_fogos {
  0% { margin-top: 100%; opacity: 0; width: 2px; height: 30px; }
  100% { opacity: 1; width: 10px; height: 10px; transform: scale(1); }
}

This keyframe animation handles the "launch" phase of the fireworks, moving the element from the bottom of the screen to its explosion point while changing its shape.