<style>
.cc
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.bc
{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/*============================*/
/*============TREE============*/

.tree
{
  width: 70vh;
  height: 80%;
}

.segment::before
{
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #1f4f15 transparent;
  border-radius: 40%;
}

.segment
{
  top: 35%;
  overflow: hidden;
}

.segment::after
{
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-style: solid;
  border-color: transparent transparent #F9F9F9 transparent;
  border-radius: 35%;
}

.segment[value="0"]{width: 70vh; height: 70vh; z-index:0;}
.segment[value="1"]{width: 50vh; height: 50vh; z-index:1;}
.segment[value="2"]{width: 30vh; height: 30vh; z-index:2;}
.segment[value="0"]::before{border-width: 35vh;}
.segment[value="1"]::before{border-width: 25vh;}
.segment[value="2"]::before{border-width: 15vh;}
.segment[value="0"]::after{border-width: 23.5vh;}
.segment[value="1"]::after{border-width: 14vh;}
.segment[value="2"]::after{border-width: 7vh;}

.highlight
{
  position: absolute;
  width: 10%;
  height: 35%;
  bottom: 3.25%;
  left: 67.25%;
  border-radius: 0 0 0 100%;
  transform: rotate(-45deg);
  background: #216315;
}

.stump
{
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 15vh;
  height: 25vh;
  background: #3f2b27;
  transform: translateX(-50%);
  border-radius: 6vh;
  overflow: hidden;
}

.stump::after
{
  content: ' ';
  position: absolute;
  right: 0;
  width: 15%;
  height: 100%;
  background: #47332b;
  border-radius: 0 0 0 100%;
}

.ball
{
  position: absolute;
  bottom: 0;
  width: 5vh;
  height: 5vh;
  border-radius: 5vh;
  background: #7a3232;
  transform-origin: 50% -50%;
  transition: all 0.2s ease-in-out;
  z-index: 3;
}
.ball::after
{
  content: ' ';
  position: absolute;
  top: 10%;
  right: 12.5%;
  width: 50%;
  height: 40%;
  border-radius: 100%;
  background: #D14B4B;
}

.ball:nth-child(1) 
{
    bottom: 10%;
    left: 20%;
}

.ball:nth-child(2) 
{
    bottom: 7.5%;
    left: 65%;
}

.ball:nth-child(3) 
{
    bottom: 3%;
    left: 42.5%;
}

/*============TREE============*/
/*============================*/

/*============================*/
/*==========PRESENTS==========*/
.present:before
{
  content: ' ';
  display: none;
}

.present.open::before
{
  position: absolute;
  width: 100%;
  height: 35%;
  transform: translateY(-100%);
  background: #5B1616;
  border-radius: 10%;
  display: block;
}

.present
{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 12vh;
  height: 12vh;
  background: #7f2121;
  transition: transform 0.2s ease-in;
  transform-origin: center center;
  border-radius: 10%;
  cursor: pointer;
}

.bow
{
  width: 30%;
  height: 100%;
  background: #D4C228;
  z-index: 2;
}
 
.bow::after
{
  content: ' ';
  display: block;
  width: 90%;
  height: 100%;
  background: #E0CF43;
  transform: rotate(90deg);
}

.bow:nth-child(2)
{
  top: 0;
  left: -62.5%;
  width: 175%;
  height: 30%;
  transform: translate(14%,-100%) scale(0.575);
  z-index: 2;
  background: #847A23;
  display: none;
}

.bow:nth-child(2)::after
{
  position: absolute;
  top: -49%;
  left: 31.5%;
  width: 37.5%;
  height: 175%;
  background: #9D912D;
}

.present.open .bow:nth-child(2)
{
  display: block;
}
/*==========PRESENTS==========*/
/*============================*/
/*============================*/
/*==========LETTERS===========*/
.letter
{
  position: absolute;
  font-size: 5vh;
  color: white;
  transition: all 1.2s ease-in-out;
  text-align: center;
}
/*==========LETTERS===========*/
/*============================*/
</style>
<script>
/*
  * Made by C.Dinkelborg for GetDigital 
  * Geekolaus Aktion 
  * Aktionscode: G6NK5AUVB
  * @2016 all rights reserved
*/

var balls = document.getElementsByClassName("ball");

var presents = document.getElementsByClassName("present");

for(var i=0; i<balls.length; i++)
{
  balls[i].addEventListener("mouseover",onMouseOverBall);
  balls[i].addEventListener("touchstart",onMouseOverBall);
};

for(var i=0; i<presents.length; i++)
{
  presents[i].addEventListener("mouseover",onMouseOverPresent);
  presents[i].addEventListener("click",onClickPresent);
};

function onMouseOverBall(e)
{
  if(!this.swinging)
  {
    var rect = this.getBoundingClientRect();
    if(e.clientX < (rect.left+this.clientWidth/2)) // This means mouse is left of ball
    {
      this.swinging = true;
      this.style.transform = "rotate(-45deg)";
      setTimeout(function(){swing(this,300-70)}.bind(this),300);
    } 
    else
    {
      this.swinging = true;
      swing(this,300);
    }
  }
}

function swing(ball,time)
{
  //console.log(ball);
  if(ball.style.transform == "rotate(45deg)")
  {
    ball.style.transform = "rotate(-45deg)";
  }
  else
  {
    ball.style.transform = "rotate(45deg)";
  }
  if(time>0)
  {
    setTimeout(function()
    {
      swing.call(this, ball,time-70);
    },time);
  }
  else 
  {
    ball.style.transform = ""; 
    ball.swinging = false;
  }
}

function onMouseOverPresent(e)
{
  if(!this.wiggling && !this.classList.contains("open"))
  {
    var rect = this.getBoundingClientRect();
    if(e.clientX < (rect.left+this.clientWidth/2)) // This means mouse is left of present
    {
      this.wiggling = true;
      this.style.transform = "rotate(45deg)";
      setTimeout(function(){wiggle(this,300-70,"left")}.bind(this),300);
    } 
    else
    {
      this.wiggling = true;
      wiggle(this,300,"right");
    }
  }
}

function onClickPresent()
{
  setTimeout(function()
  {
    this.classList.add("open"); 
    unfold();
  }.bind(this),1000);
}

function wiggle(present,time,direction)
{
  if(direction == "left")
  {
    if(present.style.transform == "rotate(45deg)")
    {
      present.style.transform = "rotate(0deg)";
    }
    else
    {
      present.style.transform = "rotate(45deg)";
    }
  }
  else
  {
    if(present.style.transform == "rotate(-45deg)")
    {
      present.style.transform = "rotate(0deg)";
    }
    else
    {
      present.style.transform = "rotate(-45deg)";
    }
  }
  if(time>0)
  {
    setTimeout(function()
    {
      wiggle.call(this, present,time-70,(direction == "left")?"right":"left");
    },time);
  }
  else 
  {
    present.style.transform = ""; 
    present.wiggling = false;
  }
}

var letters = document.getElementsByClassName("letter");
function unfold()
{
  for(var i=0; i<letters.length; i++)
  {
    letters[i].style.top = "-75vh";
    letters[i].style.transform = "translateY("+i*5+"vh)";
  }
}


//SNOW EFFECT WITH KIND SUPPORT FROM 
//http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect
window.onload = function(){
	//canvas init
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	
	//canvas dimensions
	var W = window.innerWidth;
	var H = window.innerHeight;
	canvas.width = W;
	canvas.height = H;
	
	//snowflake particles
	var mp = 25; //max particles
	var particles = [];
	for(var i = 0; i < mp; i++)
	{
    particles.push({
    	x: Math.random()*W, //x-coordinate
    	y: Math.random()*H, //y-coordinate
    	r: Math.random()*4+1, //radius
    	d: Math.random()*mp //density
    })
	}
	
	//Lets draw the flakes
	function draw()
	{
    ctx.clearRect(0, 0, W, H);
    
    ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
    ctx.beginPath();
    for(var i = 0; i < mp; i++)
    {
    	var p = particles[i];
    	ctx.moveTo(p.x, p.y);
    	ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
    }
    ctx.fill();
    update();
	}
	
	//Function to move the snowflakes
	//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
	var angle = 0;
	function update()
	{
    angle += 0.01;
    for(var i = 0; i < mp; i++)
    {
    	var p = particles[i];
    	//Updating X and Y coordinates
    	//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
    	//Every particle has its own density which can be used to make the downward movement different for each flake
    	//Lets make it more random by adding in the radius
    	p.y += Math.cos(angle+p.d) + 1 + p.r/2;
    	p.x += Math.sin(angle) * 2;
    	
    	//Sending flakes back from the top when it exits
    	//Lets make it a bit more organic and let flakes enter from the left and right also.
    	if(p.x > W+5 || p.x < -5 || p.y > H)
    	{
        if(i%3 > 0) //66.67% of the flakes
        {
        	particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
        }
        else
        {
        	//If the flake is exitting from the right
        	if(Math.sin(angle) > 0)
        	{
            //Enter from the left
            particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
        	}
        	else
        	{
            //Enter from the right
            particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
        	}
        }
    	}
    }
	}
	
	//animation loop
	setInterval(draw, 33);
}
</script>
<canvas id="canvas"></canvas>

<div class="tree cc">
  <div class="stump">
  </div>
  <div class="segment cc" value="0">
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="highlight bc"></div>
    <div class="segment cc" value="1">
      <div class="ball"></div>
      <div class="ball"></div>
      <div class="ball"></div>
      <div class="highlight bc"></div>
      <div class="segment cc" value="2">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="highlight bc"></div>
      </div>
    </div>
  </div>
  <div class="present">
    <div class="bow cc"></div>
    <div class="bow cc"></div>
    <div class="letter cc">F</div>
    <div class="letter cc">R</div>
    <div class="letter cc">O</div>
    <div class="letter cc">H</div>
    <div class="letter cc">E</div>
    <div class="letter cc">S</div>
    <div class="letter cc"> </div>
    <div class="letter cc">F</div>
    <div class="letter cc">E</div>
    <div class="letter cc">S</div>
    <div class="letter cc">T</div>
    <div class="letter cc">!</div>
  </div>
</div