Let’s create a Christmas Tree Animation using HTML and CSS. This project will feature a beautifully styled tree with glowing lights, smooth animations, and a festive holiday vibe right in the browser.
We’ll use:
- HTML to build the tree structure and decorative elements.
- CSS to style the tree, add colorful lights, and create gentle animations like blinking lights or falling snow.
This is a perfect project for the holiday season and a great way to practice creative CSS animations. Whether you’re a beginner or an experienced developer, making a Christmas Tree Animation is a fun way to bring festive cheer into your web projects. Let’s start decorating with code! 🎄✨
HTML :
This code creates a 3D Christmas tree animation by placing many small star elements inside a main container. Each star uses custom CSS variables to control its rotation, position, and size, and the linked CSS file reads these values to animate them in a spiral tree-like shape. The HTML only lists the stars, while the real magic happens in the CSS, which uses transforms and loops to build the glowing rotating tree effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Christmas Tree 🌟🎄 animation | @coding.stella</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<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>
<div class="🌟" style="--rox: 0.03; --roy: 0.2; --roz: -0.13; --sf: 0.62"></div>
<div class="🌟" style="--rox: 0.13; --roy: 0.17; --roz: -0.18; --sf: 0.81"></div>
<div class="🌟" style="--rox: -0.02; --roy: 0.09; --roz: 0.04; --sf: 0.62"></div>
<div class="🌟" style="--rox: 0.17; --roy: -0.08; --roz: 0; --sf: 0.63"></div>
<div class="🌟" style="--rox: 0.1; --roy: 0.16; --roz: -0.08; --sf: 0.79"></div>
<div class="🌟" style="--rox: 0.08; --roy: -0.16; --roz: -0.04; --sf: 0.55"></div>
<div class="🌟" style="--rox: 0.03; --roy: 0.12; --roz: -0.19; --sf: 0.72"></div>
<div class="🌟" style="--rox: -0.16; --roy: -0.02; --roz: 0.17; --sf: 0.75"></div>
<div class="🌟" style="--rox: -0.09; --roy: 0.18; --roz: -0.01; --sf: 0.65"></div>
<div class="🌟" style="--rox: -0.11; --roy: -0.14; --roz: -0.18; --sf: 0.66"></div>
<div class="🌟" style="--rox: -0.03; --roy: -0.16; --roz: 0.16; --sf: 0.97"></div>
<div class="🌟" style="--rox: -0.12; --roy: 0.14; --roz: -0.03; --sf: 0.5"></div>
<div class="🌟" style="--rox: 0.1; --roy: 0.11; --roz: -0.06; --sf: 0.82"></div>
<div class="🌟" style="--rox: 0.07; --roy: 0.19; --roz: -0.12; --sf: 0.75"></div>
<div class="🌟" style="--rox: 0.13; --roy: -0.04; --roz: -0.02; --sf: 0.85"></div>
<div class="🌟" style="--rox: -0.15; --roy: -0.07; --roz: -0.07; --sf: 0.89"></div>
<div class="🌟" style="--rox: 0.04; --roy: 0.14; --roz: 0.04; --sf: 0.89"></div>
<div class="🌟" style="--rox: -0.15; --roy: -0.16; --roz: 0.02; --sf: 0.64"></div>
<div class="🌟" style="--rox: -0.07; --roy: 0; --roz: 0; --sf: 0.94"></div>
<div class="🌟" style="--rox: 0.15; --roy: 0.13; --roz: 0.04; --sf: 0.9"></div>
<div class="🌟" style="--rox: 0.09; --roy: -0.17; --roz: 0; --sf: 0.69"></div>
<div class="🌟" style="--rox: 0.06; --roy: -0.19; --roz: -0.1; --sf: 0.71"></div>
<div class="🌟" style="--rox: 0.1; --roy: 0.06; --roz: 0.06; --sf: 0.57"></div>
<div class="🌟" style="--rox: 0.11; --roy: -0.19; --roz: -0.1; --sf: 0.79"></div>
<div class="🌟" style="--rox: 0.15; --roy: 0.06; --roz: -0.19; --sf: 0.64"></div>
<div class="🌟" style="--rox: -0.08; --roy: -0.1; --roz: 0.08; --sf: 0.95"></div>
<div class="🌟" style="--rox: -0.1; --roy: -0.14; --roz: 0.06; --sf: 0.96"></div>
<div class="🌟" style="--rox: -0.12; --roy: -0.07; --roz: -0.1; --sf: 0.52"></div>
<div class="🌟" style="--rox: -0.05; --roy: 0.07; --roz: 0.11; --sf: 0.91"></div>
<div class="🌟" style="--rox: 0.12; --roy: -0.17; --roz: 0.17; --sf: 0.82"></div>
<div class="🌟" style="--rox: -0.16; --roy: -0.1; --roz: 0.19; --sf: 0.83"></div>
<div class="🌟" style="--rox: 0.13; --roy: 0.18; --roz: 0.01; --sf: 0.65"></div>
<div class="🌟" style="--rox: -0.16; --roy: 0.03; --roz: -0.08; --sf: 0.88"></div>
<div class="🌟" style="--rox: -0.02; --roy: 0.03; --roz: -0.18; --sf: 0.81"></div>
<div class="🌟" style="--rox: 0.17; --roy: 0.12; --roz: 0.19; --sf: 0.89"></div>
<div class="🌟" style="--rox: -0.18; --roy: 0.05; --roz: 0.02; --sf: 0.63"></div>
<div class="🌟" style="--rox: 0.12; --roy: -0.2; --roz: 0.13; --sf: 0.51"></div>
<div class="🌟" style="--rox: -0.14; --roy: -0.18; --roz: -0.16; --sf: 0.87"></div>
<div class="🌟" style="--rox: 0.15; --roy: -0.13; --roz: -0.2; --sf: 0.97"></div>
<div class="🌟" style="--rox: -0.15; --roy: 0.03; --roz: 0.16; --sf: 0.92"></div>
<div class="🌟" style="--rox: -0.05; --roy: -0.14; --roz: 0.1; --sf: 0.69"></div>
<div class="🌟" style="--rox: 0.11; --roy: -0.05; --roz: -0.01; --sf: 0.78"></div>
<div class="🌟" style="--rox: 0.17; --roy: 0.12; --roz: -0.16; --sf: 0.88"></div>
<div class="🌟" style="--rox: -0.12; --roy: 0.06; --roz: -0.07; --sf: 0.85"></div>
<div class="🌟" style="--rox: 0.19; --roy: -0.04; --roz: -0.01; --sf: 0.86"></div>
<div class="🌟" style="--rox: -0.12; --roy: -0.12; --roz: 0.14; --sf: 0.58"></div>
<div class="🌟" style="--rox: -0.1; --roy: 0.06; --roz: 0.07; --sf: 0.62"></div>
<div class="🌟" style="--rox: -0.1; --roy: 0.11; --roz: -0.15; --sf: 0.66"></div>
<div class="🌟" style="--rox: -0.14; --roy: -0.16; --roz: 0.13; --sf: 0.99"></div>
<div class="🌟" style="--rox: 0.11; --roy: 0.17; --roz: 0.05; --sf: 0.52"></div>
<div class="🌟" style="--rox: 0.11; --roy: 0.08; --roz: 0.06; --sf: 0.57"></div>
<div class="🌟" style="--rox: 0.01; --roy: -0.01; --roz: -0.16; --sf: 0.84"></div>
<div class="🌟" style="--rox: 0.11; --roy: 0.14; --roz: 0.01; --sf: 0.99"></div>
<div class="🌟" style="--rox: -0.12; --roy: -0.15; --roz: 0.04; --sf: 0.78"></div>
<div class="🌟" style="--rox: 0.1; --roy: 0.11; --roz: 0.08; --sf: 0.96"></div>
<div class="🌟" style="--rox: 0.06; --roy: -0.03; --roz: -0.16; --sf: 0.81"></div>
<div class="🌟" style="--rox: -0.01; --roy: -0.18; --roz: -0.02; --sf: 0.8"></div>
<div class="🌟" style="--rox: -0.08; --roy: 0.06; --roz: 0.16; --sf: 0.69"></div>
<div class="🌟" style="--rox: -0.02; --roy: -0.16; --roz: -0.13; --sf: 0.61"></div>
<div class="🌟" style="--rox: -0.03; --roy: -0.02; --roz: -0.03; --sf: 0.68"></div>
<div class="🌟" style="--rox: -0.2; --roy: 0.17; --roz: 0.02; --sf: 0.93"></div>
<div class="🌟" style="--rox: -0.16; --roy: 0.08; --roz: 0.17; --sf: 0.73"></div>
<div class="🌟" style="--rox: -0.08; --roy: -0.08; --roz: 0.19; --sf: 0.51"></div>
<div class="🌟" style="--rox: 0.03; --roy: -0.17; --roz: -0.02; --sf: 0.91"></div>
<div class="🌟" style="--rox: 0.05; --roy: 0.05; --roz: -0.16; --sf: 0.54"></div>
<div class="🌟" style="--rox: -0.03; --roy: -0.09; --roz: 0.01; --sf: 0.78"></div>
<div class="🌟" style="--rox: -0.08; --roy: 0.03; --roz: 0.03; --sf: 0.73"></div>
<div class="🌟" style="--rox: 0.08; --roy: 0.1; --roz: 0.1; --sf: 0.67"></div>
<div class="🌟" style="--rox: 0.19; --roy: -0.01; --roz: 0.01; --sf: 0.65"></div>
<div class="🌟" style="--rox: 0.19; --roy: 0.16; --roz: 0.06; --sf: 0.56"></div>
<div class="🌟" style="--rox: 0.06; --roy: 0.05; --roz: 0.05; --sf: 0.54"></div>
<div class="🌟" style="--rox: 0.12; --roy: -0.13; --roz: -0.07; --sf: 0.82"></div>
<div class="🌟" style="--rox: 0.06; --roy: 0.05; --roz: 0.09; --sf: 0.69"></div>
<div class="🌟" style="--rox: 0.11; --roy: 0.08; --roz: 0.01; --sf: 0.78"></div>
<div class="🌟" style="--rox: -0.05; --roy: -0.06; --roz: 0.14; --sf: 0.52"></div>
<div class="🌟" style="--rox: -0.02; --roy: -0.06; --roz: -0.01; --sf: 0.58"></div>
<div class="🌟" style="--rox: 0.18; --roy: -0.1; --roz: 0.19; --sf: 0.59"></div>
<div class="🌟" style="--rox: -0.05; --roy: 0.19; --roz: 0.19; --sf: 0.51"></div>
<div class="🌟" style="--rox: -0.08; --roy: -0.11; --roz: -0.08; --sf: 0.78"></div>
<div class="🌟" style="--rox: 0.02; --roy: -0.1; --roz: -0.16; --sf: 0.55"></div>
<div class="🌟" style="--rox: -0.05; --roy: -0.12; --roz: 0.13; --sf: 0.55"></div>
<div class="🌟" style="--rox: 0.11; --roy: 0.08; --roz: 0.13; --sf: 0.64"></div>
<div class="🌟" style="--rox: 0.16; --roy: -0.04; --roz: -0.19; --sf: 0.9"></div>
<div class="🌟" style="--rox: -0.12; --roy: -0.19; --roz: -0.08; --sf: 0.96"></div>
<div class="🌟" style="--rox: 0.16; --roy: -0.13; --roz: 0.05; --sf: 0.63"></div>
<div class="🌟" style="--rox: -0.05; --roy: 0.1; --roz: 0.17; --sf: 0.56"></div>
<div class="🌟" style="--rox: -0.01; --roy: -0.13; --roz: 0.07; --sf: 0.56"></div>
<div class="🌟" style="--rox: -0.07; --roy: 0.07; --roz: -0.12; --sf: 0.96"></div>
<div class="🌟" style="--rox: 0.17; --roy: 0.12; --roz: 0.19; --sf: 0.65"></div>
<div class="🌟" style="--rox: -0.2; --roy: -0.13; --roz: -0.13; --sf: 0.64"></div>
<div class="🌟" style="--rox: 0.16; --roy: -0.12; --roz: -0.19; --sf: 0.92"></div>
<div class="🌟" style="--rox: 0.11; --roy: -0.13; --roz: -0.03; --sf: 0.92"></div>
<div class="🌟" style="--rox: -0.16; --roy: 0; --roz: 0.15; --sf: 0.57"></div>
<div class="🌟" style="--rox: -0.17; --roy: 0.16; --roz: 0; --sf: 0.84"></div>
<div class="🌟" style="--rox: -0.18; --roy: -0.09; --roz: 0; --sf: 0.75"></div>
<div class="🌟" style="--rox: -0.01; --roy: 0.11; --roz: 0.06; --sf: 0.56"></div>
<div class="🌟" style="--rox: -0.12; --roy: -0.2; --roz: 0.11; --sf: 0.6"></div>
<div class="🌟" style="--rox: 0.12; --roy: 0.04; --roz: 0.19; --sf: 0.76"></div>
<div class="🌟" style="--rox: 0.19; --roy: -0.13; --roz: 0.12; --sf: 0.94"></div>
<div class="🌟" style="--rox: 0.01; --roy: 0.02; --roz: -0.14; --sf: 0.58"></div>
<div class="🌟" style="--rox: 0.12; --roy: 0.05; --roz: -0.01; --sf: 0.67"></div>
<div class="🌟" style="--rox: -0.16; --roy: 0.01; --roz: -0.1; --sf: 0.57"></div>
<div class="🌟" style="--rox: 0.07; --roy: 0.05; --roz: -0.01; --sf: 0.8"></div>
<div class="🌟" style="--rox: -0.01; --roy: 0; --roz: 0.04; --sf: 0.94"></div>
<div class="🌟" style="--rox: 0.19; --roy: 0.08; --roz: 0.06; --sf: 0.94"></div>
<div class="🌟" style="--rox: 0.2; --roy: -0.08; --roz: 0.14; --sf: 0.63"></div>
<div class="🌟" style="--rox: -0.14; --roy: 0.02; --roz: 0.1; --sf: 0.75"></div>
<div class="🌟" style="--rox: -0.05; --roy: 0; --roz: -0.05; --sf: 0.95"></div>
<div class="🌟" style="--rox: 0.08; --roy: -0.2; --roz: 0.04; --sf: 0.95"></div>
<div class="🌟" style="--rox: 0.13; --roy: -0.13; --roz: 0.02; --sf: 0.62"></div>
<div class="🌟" style="--rox: -0.05; --roy: -0.01; --roz: 0.04; --sf: 0.68"></div>
<div class="🌟" style="--rox: 0.05; --roy: -0.01; --roz: -0.15; --sf: 0.83"></div>
<div class="🌟" style="--rox: -0.08; --roy: -0.2; --roz: 0.05; --sf: 0.79"></div>
<div class="🌟" style="--rox: 0.08; --roy: 0.12; --roz: 0.13; --sf: 0.55"></div>
<div class="🌟" style="--rox: 0.08; --roy: 0.12; --roz: -0.11; --sf: 0.97"></div>
<div class="🌟" style="--rox: -0.06; --roy: 0.1; --roz: 0.04; --sf: 0.64"></div>
<div class="🌟" style="--rox: -0.12; --roy: -0.02; --roz: -0.18; --sf: 0.62"></div>
<div class="🌟" style="--rox: -0.14; --roy: -0.11; --roz: -0.03; --sf: 0.67"></div>
<div class="🌟" style="--rox: 0; --roy: 0.06; --roz: 0.1; --sf: 0.83"></div>
<div class="🌟" style="--rox: 0.02; --roy: -0.18; --roz: -0.02; --sf: 0.95"></div>
<div class="🌟" style="--rox: 0.01; --roy: 0.09; --roz: 0.06; --sf: 0.76"></div>
<div class="🌟" style="--rox: 0.05; --roy: -0.16; --roz: 0; --sf: 0.93"></div>
<div class="🌟" style="--rox: 0.06; --roy: -0.16; --roz: 0.12; --sf: 0.74"></div>
<div class="🌟" style="--rox: 0.14; --roy: -0.09; --roz: 0.12; --sf: 0.63"></div>
<div class="🌟" style="--rox: 0.07; --roy: 0.09; --roz: -0.11; --sf: 0.95"></div>
<div class="🌟" style="--rox: -0.17; --roy: -0.18; --roz: -0.14; --sf: 0.83"></div>
<div class="🌟" style="--rox: -0.18; --roy: -0.11; --roz: -0.14; --sf: 0.81"></div>
<div class="🌟" style="--rox: 0.12; --roy: 0.16; --roz: -0.16; --sf: 0.61"></div>
<div class="🌟" style="--rox: -0.08; --roy: -0.19; --roz: -0.16; --sf: 0.53"></div>
<div class="🌟" style="--rox: 0.11; --roy: -0.05; --roz: -0.17; --sf: 0.59"></div>
<div class="🌟" style="--rox: -0.01; --roy: 0.18; --roz: 0.19; --sf: 0.67"></div>
<div class="🌟" style="--rox: 0.12; --roy: 0.04; --roz: 0.1; --sf: 0.52"></div>
<div class="🌟" style="--rox: -0.2; --roy: 0.16; --roz: 0.14; --sf: 0.66"></div>
<div class="🌟" style="--rox: 0.11; --roy: -0.06; --roz: 0.07; --sf: 0.89"></div>
<div class="🌟" style="--rox: -0.03; --roy: 0.02; --roz: 0.14; --sf: 0.78"></div>
<div class="🌟" style="--rox: 0.19; --roy: -0.19; --roz: -0.04; --sf: 0.66"></div>
<div class="🌟" style="--rox: 0.09; --roy: 0.04; --roz: -0.18; --sf: 0.85"></div>
<div class="🌟" style="--rox: -0.04; --roy: -0.17; --roz: 0.16; --sf: 0.74"></div>
<div class="🌟" style="--rox: 0.04; --roy: 0.04; --roz: -0.19; --sf: 0.91"></div>
<div class="🌟" style="--rox: -0.01; --roy: -0.12; --roz: 0.12; --sf: 0.91"></div>
<div class="🌟" style="--rox: 0; --roy: 0.01; --roz: 0.17; --sf: 0.63"></div>
<div class="🌟" style="--rox: -0.18; --roy: 0.2; --roz: -0.1; --sf: 0.87"></div>
<div class="🌟" style="--rox: 0.1; --roy: 0.17; --roz: -0.08; --sf: 0.95"></div>
<div class="🌟" style="--rox: 0.09; --roy: -0.13; --roz: 0.06; --sf: 0.68"></div>
<div class="🌟" style="--rox: -0.09; --roy: -0.08; --roz: -0.04; --sf: 0.82"></div>
<div class="🌟" style="--rox: -0.12; --roy: 0.09; --roz: -0.19; --sf: 0.9"></div>
<div class="🌟" style="--rox: 0.18; --roy: -0.13; --roz: -0.17; --sf: 0.82"></div>
<div class="🌟" style="--rox: 0.17; --roy: 0.09; --roz: 0.03; --sf: 0.71"></div>
<div class="🌟" style="--rox: 0.14; --roy: -0.08; --roz: -0.03; --sf: 0.6"></div>
<div class="🌟" style="--rox: 0.05; --roy: -0.18; --roz: -0.01; --sf: 0.99"></div>
<div class="🌟" style="--rox: -0.09; --roy: 0.11; --roz: -0.11; --sf: 0.84"></div>
<div class="🌟" style="--rox: 0.1; --roy: -0.19; --roz: 0.09; --sf: 0.59"></div>
<div class="🌟" style="--rox: -0.1; --roy: 0.16; --roz: 0.16; --sf: 0.92"></div>
<div class="🌟" style="--rox: -0.12; --roy: 0.11; --roz: 0.08; --sf: 0.84"></div>
<div class="🌟" style="--rox: 0.02; --roy: 0.01; --roz: -0.13; --sf: 0.64"></div>
<div class="🌟" style="--rox: -0.18; --roy: 0.06; --roz: 0.19; --sf: 0.5"></div>
<div class="🌟" style="--rox: 0.03; --roy: -0.19; --roz: 0.06; --sf: 0.88"></div>
<div class="🌟" style="--rox: -0.01; --roy: 0.01; --roz: -0.04; --sf: 0.64"></div>
<div class="🌟" style="--rox: -0.03; --roy: -0.13; --roz: -0.14; --sf: 0.77"></div>
<div class="🌟" style="--rox: 0.13; --roy: 0.18; --roz: 0.12; --sf: 0.61"></div>
<div class="🌟" style="--rox: 0.04; --roy: -0.17; --roz: -0.01; --sf: 0.51"></div>
<div class="🌟" style="--rox: -0.09; --roy: -0.19; --roz: -0.19; --sf: 0.91"></div>
<div class="🌟" style="--rox: 0.12; --roy: -0.14; --roz: -0.13; --sf: 0.89"></div>
<div class="🌟" style="--rox: 0.1; --roy: 0.17; --roz: 0.18; --sf: 0.52"></div>
<div class="🌟" style="--rox: -0.13; --roy: -0.15; --roz: 0.06; --sf: 0.83"></div>
<div class="🌟" style="--rox: -0.15; --roy: 0.17; --roz: -0.01; --sf: 0.96"></div>
<div class="🌟" style="--rox: 0.06; --roy: 0.14; --roz: -0.1; --sf: 0.53"></div>
<div class="🌟" style="--rox: -0.14; --roy: 0.12; --roz: -0.15; --sf: 0.64"></div>
<div class="🌟" style="--rox: -0.18; --roy: 0.04; --roz: 0.15; --sf: 0.68"></div>
<div class="🌟" style="--rox: 0.01; --roy: 0.17; --roz: 0.16; --sf: 0.68"></div>
<div class="🌟" style="--rox: 0.1; --roy: -0.11; --roz: -0.04; --sf: 0.95"></div>
<div class="🌟" style="--rox: -0.14; --roy: 0.19; --roz: -0.08; --sf: 0.67"></div>
<div class="🌟" style="--rox: -0.01; --roy: 0.04; --roz: 0.03; --sf: 0.7"></div>
<div class="🌟" style="--rox: 0.09; --roy: 0.17; --roz: 0.06; --sf: 0.6"></div>
<div class="🌟" style="--rox: 0.11; --roy: -0.05; --roz: -0.1; --sf: 0.65"></div>
<div class="🌟" style="--rox: -0.01; --roy: -0.19; --roz: 0; --sf: 0.58"></div>
<div class="🌟" style="--rox: -0.12; --roy: 0.08; --roz: 0.11; --sf: 0.63"></div>
<div class="🌟" style="--rox: 0.14; --roy: 0.01; --roz: -0.07; --sf: 0.84"></div>
<div class="🌟" style="--rox: -0.16; --roy: 0.07; --roz: 0; --sf: 0.87"></div>
<div class="🌟" style="--rox: 0.1; --roy: -0.17; --roz: -0.01; --sf: 0.54"></div>
<div class="🌟" style="--rox: 0; --roy: 0.17; --roz: -0.05; --sf: 0.51"></div>
<div class="🌟" style="--rox: 0.17; --roy: 0.06; --roz: -0.13; --sf: 0.75"></div>
<div class="🌟" style="--rox: -0.02; --roy: 0.13; --roz: 0.04; --sf: 0.61"></div>
<div class="🌟" style="--rox: -0.02; --roy: 0.1; --roz: 0.01; --sf: 0.96"></div>
<div class="🌟" style="--rox: 0.01; --roy: -0.2; --roz: -0.06; --sf: 0.53"></div>
<div class="🌟" style="--rox: 0.1; --roy: -0.09; --roz: -0.1; --sf: 0.6"></div>
<div class="🌟" style="--rox: 0.12; --roy: -0.1; --roz: 0.11; --sf: 0.85"></div>
<div class="🌟" style="--rox: 0.15; --roy: -0.19; --roz: 0.2; --sf: 0.64"></div>
<div class="🌟" style="--rox: -0.01; --roy: -0.12; --roz: -0.15; --sf: 0.86"></div>
<div class="🌟" style="--rox: 0.18; --roy: 0.19; --roz: -0.03; --sf: 0.72"></div>
<div class="🌟" style="--rox: 0.1; --roy: 0.15; --roz: 0.14; --sf: 0.79"></div>
<div class="🌟" style="--rox: 0.16; --roy: 0; --roz: -0.1; --sf: 0.51"></div>
<div class="🌟" style="--rox: 0.08; --roy: 0.07; --roz: 0.07; --sf: 0.63"></div>
<div class="🌟" style="--rox: 0.01; --roy: -0.1; --roz: -0.18; --sf: 0.65"></div>
<div class="🌟" style="--rox: 0.04; --roy: 0.04; --roz: 0.09; --sf: 0.52"></div>
<div class="🌟" style="--rox: 0; --roy: 0.02; --roz: 0.01; --sf: 0.87"></div>
<div class="🌟" style="--rox: -0.06; --roy: 0.1; --roz: 0; --sf: 0.79"></div>
<div class="🌟" style="--rox: -0.13; --roy: 0.19; --roz: -0.03; --sf: 0.91"></div>
<div class="🌟" style="--rox: 0.1; --roy: 0.19; --roz: -0.1; --sf: 0.71"></div>
</div>
</body>
</html>
CSS :
This CSS builds the entire 3D Christmas tree effect by using grid layout and 3D transforms to position every star in space. The main container rotates smoothly, while each star gets its own size, height, angle, and animation delay using CSS variables. Extra animations like spinning, glowing, pulsing, and hue shifting make the stars look alive. The long nth-child rules assign index values to stars so they can be placed in a spiral from bottom to top, creating the full rotating tree shape.
@charset "UTF-8";
body,
div {
display: grid;
}
body {
place-content: center;
overflow-x: hidden;
margin: 0;
height: 100vh;
perspective: 35em;
background: #000014;
}
div {
transform-style: preserve-3d;
}
.a3d {
--m: calc(.5*(var(--n-stars) - 1));
--t: calc(0.33333*var(--n-stars)*0.1s);
animation: roty 12s linear var(--t) infinite reverse;
}
@keyframes roty {
to {
rotate: y 1turn;
}
}
.🌟 {
--q: Min(1, var(--j));
--p: calc(1 - var(--q));
--s: calc((1.25*var(--p) + var(--q)*var(--sf))*2em);
--ay0: calc(var(--i)/var(--n-arms)*1turn);
--ay1: calc(var(--ay0) - var(--n-loops)*1turn);
--ay: calc((var(--j)/var(--n-stars)*var(--n-loops) + var(--i)/var(--n-arms))*1turn);
--tx: calc(var(--q)*var(--rox)*2em);
--ty0: calc(var(--m)/var(--n-stars)*20em);
--ty1: calc(-1*var(--ty0) - 0.75*2em);
--ty: calc((var(--j) - var(--m))/var(--n-stars)*20em + (var(--q)*var(--roy) - var(--p)*0.75)*2em);
--tz: calc(var(--j)/var(--n-stars)*10em + var(--q)*var(--roz)*2em);
grid-area: 1/ 1;
width: var(--s);
height: var(--s);
--pos: rotatey(var(--ay)) translate3d(var(--tx), var(--ty), var(--tz)) rotatey(calc(-1*var(--ay)));
transform: var(--pos);
--dt: calc(0.33333*(var(--n-stars) - var(--j))*0.1s);
animation: grow calc(var(--q)*0.1s) ease-out var(--dt) backwards, move calc(var(--p)*var(--t)) linear;
}
.🌟::after {
opacity: calc(var(--p) + var(--q)*var(--j)/var(--n-stars) + .25);
background: radial-gradient(#fffacd 10%, rgba(255, 250, 205, 0.2));
clip-path: polygon(50% 0%, 53.53553% 41.46447%, 85.35534% 14.64466%, 58.53553% 46.46447%, 100% 50%, 58.53553% 53.53553%, 85.35534% 85.35534%, 53.53553% 58.53553%, 50% 100%, 46.46447% 58.53553%, 14.64466% 85.35534%, 41.46447% 53.53553%, 0% 50%, 41.46447% 46.46447%, 14.64466% 14.64466%, 46.46447% 41.46447%);
animation: roty 12s linear var(--t) infinite, puls calc(var(--p)*.1s) ease-in-out infinite alternate, hue 4s linear var(--dt) infinite;
content: "";
}
@keyframes grow {
0% {
transform: var(--pos) scale(0);
}
}
@keyframes move {
0% {
transform: rotatey(var(--ay0)) translate3d(0, var(--ty0), 10em) rotatey(calc(-1*var(--ay0)));
}
100% {
transform: rotatey(var(--ay1)) translate3d(0, var(--ty1), 0) rotatey(calc(-1*var(--ay1)));
}
}
@keyframes puls {
to {
scale: .2;
opacity: 0.2;
}
}
@keyframes hue {
to {
filter: hue-rotate(360deg);
}
}
.🌟:nth-child(n + 1) {
--i: 0
}
.🌟:nth-child(n + 101) {
--i: 1
}
.🌟:nth-child(100n + 1) {
--j: 0
}
.🌟:nth-child(100n + 2) {
--j: 1
}
.🌟:nth-child(100n + 3) {
--j: 2
}
.🌟:nth-child(100n + 4) {
--j: 3
}
.🌟:nth-child(100n + 5) {
--j: 4
}
.🌟:nth-child(100n + 6) {
--j: 5
}
.🌟:nth-child(100n + 7) {
--j: 6
}
.🌟:nth-child(100n + 8) {
--j: 7
}
.🌟:nth-child(100n + 9) {
--j: 8
}
.🌟:nth-child(100n + 10) {
--j: 9
}
.🌟:nth-child(100n + 11) {
--j: 10
}
.🌟:nth-child(100n + 12) {
--j: 11
}
.🌟:nth-child(100n + 13) {
--j: 12
}
.🌟:nth-child(100n + 14) {
--j: 13
}
.🌟:nth-child(100n + 15) {
--j: 14
}
.🌟:nth-child(100n + 16) {
--j: 15
}
.🌟:nth-child(100n + 17) {
--j: 16
}
.🌟:nth-child(100n + 18) {
--j: 17
}
.🌟:nth-child(100n + 19) {
--j: 18
}
.🌟:nth-child(100n + 20) {
--j: 19
}
.🌟:nth-child(100n + 21) {
--j: 20
}
.🌟:nth-child(100n + 22) {
--j: 21
}
.🌟:nth-child(100n + 23) {
--j: 22
}
.🌟:nth-child(100n + 24) {
--j: 23
}
.🌟:nth-child(100n + 25) {
--j: 24
}
.🌟:nth-child(100n + 26) {
--j: 25
}
.🌟:nth-child(100n + 27) {
--j: 26
}
.🌟:nth-child(100n + 28) {
--j: 27
}
.🌟:nth-child(100n + 29) {
--j: 28
}
.🌟:nth-child(100n + 30) {
--j: 29
}
.🌟:nth-child(100n + 31) {
--j: 30
}
.🌟:nth-child(100n + 32) {
--j: 31
}
.🌟:nth-child(100n + 33) {
--j: 32
}
.🌟:nth-child(100n + 34) {
--j: 33
}
.🌟:nth-child(100n + 35) {
--j: 34
}
.🌟:nth-child(100n + 36) {
--j: 35
}
.🌟:nth-child(100n + 37) {
--j: 36
}
.🌟:nth-child(100n + 38) {
--j: 37
}
.🌟:nth-child(100n + 39) {
--j: 38
}
.🌟:nth-child(100n + 40) {
--j: 39
}
.🌟:nth-child(100n + 41) {
--j: 40
}
.🌟:nth-child(100n + 42) {
--j: 41
}
.🌟:nth-child(100n + 43) {
--j: 42
}
.🌟:nth-child(100n + 44) {
--j: 43
}
.🌟:nth-child(100n + 45) {
--j: 44
}
.🌟:nth-child(100n + 46) {
--j: 45
}
.🌟:nth-child(100n + 47) {
--j: 46
}
.🌟:nth-child(100n + 48) {
--j: 47
}
.🌟:nth-child(100n + 49) {
--j: 48
}
.🌟:nth-child(100n + 50) {
--j: 49
}
.🌟:nth-child(100n + 51) {
--j: 50
}
.🌟:nth-child(100n + 52) {
--j: 51
}
.🌟:nth-child(100n + 53) {
--j: 52
}
.🌟:nth-child(100n + 54) {
--j: 53
}
.🌟:nth-child(100n + 55) {
--j: 54
}
.🌟:nth-child(100n + 56) {
--j: 55
}
.🌟:nth-child(100n + 57) {
--j: 56
}
.🌟:nth-child(100n + 58) {
--j: 57
}
.🌟:nth-child(100n + 59) {
--j: 58
}
.🌟:nth-child(100n + 60) {
--j: 59
}
.🌟:nth-child(100n + 61) {
--j: 60
}
.🌟:nth-child(100n + 62) {
--j: 61
}
.🌟:nth-child(100n + 63) {
--j: 62
}
.🌟:nth-child(100n + 64) {
--j: 63
}
.🌟:nth-child(100n + 65) {
--j: 64
}
.🌟:nth-child(100n + 66) {
--j: 65
}
.🌟:nth-child(100n + 67) {
--j: 66
}
.🌟:nth-child(100n + 68) {
--j: 67
}
.🌟:nth-child(100n + 69) {
--j: 68
}
.🌟:nth-child(100n + 70) {
--j: 69
}
.🌟:nth-child(100n + 71) {
--j: 70
}
.🌟:nth-child(100n + 72) {
--j: 71
}
.🌟:nth-child(100n + 73) {
--j: 72
}
.🌟:nth-child(100n + 74) {
--j: 73
}
.🌟:nth-child(100n + 75) {
--j: 74
}
.🌟:nth-child(100n + 76) {
--j: 75
}
.🌟:nth-child(100n + 77) {
--j: 76
}
.🌟:nth-child(100n + 78) {
--j: 77
}
.🌟:nth-child(100n + 79) {
--j: 78
}
.🌟:nth-child(100n + 80) {
--j: 79
}
.🌟:nth-child(100n + 81) {
--j: 80
}
.🌟:nth-child(100n + 82) {
--j: 81
}
.🌟:nth-child(100n + 83) {
--j: 82
}
.🌟:nth-child(100n + 84) {
--j: 83
}
.🌟:nth-child(100n + 85) {
--j: 84
}
.🌟:nth-child(100n + 86) {
--j: 85
}
.🌟:nth-child(100n + 87) {
--j: 86
}
.🌟:nth-child(100n + 88) {
--j: 87
}
.🌟:nth-child(100n + 89) {
--j: 88
}
.🌟:nth-child(100n + 90) {
--j: 89
}
.🌟:nth-child(100n + 91) {
--j: 90
}
.🌟:nth-child(100n + 92) {
--j: 91
}
.🌟:nth-child(100n + 93) {
--j: 92
}
.🌟:nth-child(100n + 94) {
--j: 93
}
.🌟:nth-child(100n + 95) {
--j: 94
}
.🌟:nth-child(100n + 96) {
--j: 95
}
.🌟:nth-child(100n + 97) {
--j: 96
}
.🌟:nth-child(100n + 98) {
--j: 97
}
.🌟:nth-child(100n + 99) {
--j: 98
}
.🌟:nth-child(100n + 100) {
--j: 99
}
In conclusion, creating a Christmas Tree Animation using HTML and CSS is a simple and enjoyable project that adds a festive touch to any webpage. With just structure and styling, you can bring the holiday spirit to life through glowing lights and smooth animations. Keep experimenting with colors, snow effects, and ornaments to make your animated tree even more magical! 🎅🌟
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
