Christmas Tree Animation

AI Overview: Christmas Tree Animation

This project is a visually striking 3D Christmas tree animation built entirely with HTML and CSS. It features a spiraling tree made of glowing, multi-colored stars that rotate in a three-dimensional space. The animation includes a "growth" phase where the stars appear to fly into position, followed by a continuous rotation and a twinkling color-shift effect that mimics festive holiday lights.

The project's structure relies on a single container holding over a hundred individual star elements. Each star is assigned unique data through inline CSS variables, such as its offset and scale. This allows the stylesheet to treat every star as an individual point in a larger 3D coordinate system without needing a complex JavaScript engine.

<div class="a3d" style="--n-arms: 2; --n-stars: 100; --n-loops: 4;">
  <div class="🌟" style="--rox: 0.05; --roy: 0.17; --roz: -0.16; --sf: 0.68"></div>

The HTML uses a parent container to define the tree's global properties, while each child div represents a single star with its own unique positioning variables.

The logic of the tree's shape is handled through advanced CSS math. By using nth-child selectors, the code assigns an index to every star, which is then used to calculate its specific position along a spiral path. The transform-style: preserve-3d property is crucial here, as it allows the stars to move along the Z-axis (depth), creating the illusion of a solid, conical tree.

.🌟:nth-child(100n + 5) {
  --j: 4;
}

The CSS uses these selectors to assign a numerical index (--j) to each star, which serves as the basis for calculating its mathematical position in the spiral.

Finally, the project uses multiple synchronized keyframe animations to bring the tree to life. One animation rotates the entire assembly, while others handle the "pulsing" of the stars and the "hue-rotate" effect that cycles through different colors. The star shape itself is created using a clip-path polygon, which masks a simple square into a complex, sixteen-pointed star.

clip-path: polygon(50% 0%, 53.53553% 41.46447%, 85.35534% 14.64466%, 58.53553% 46.46447%, 100% 50%, ...);

This clip-path property defines the geometric coordinates required to draw the star shape directly in the browser without using images.

@keyframes roty {
  to { rotate: y 1turn; }
}

The roty animation provides the continuous 360-degree horizontal rotation that gives the project its 3D depth.