Categories
CSS HTML Web development

CSS Bouncing Envelope / Contact Animation

CSS Bouncing Envelope / Contact Animation

To learn how to create the CSS Bouncing Envelope follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="contact-envelope">
  <div class="envelope">
    <div class="envelope-back"></div>
    <div class="message"></div>
    <div class="envelope-front"></div>
  </div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.contact-envelope {
  position: relative;
  border-radius: 50%;
  background-color: #4987f4;
  width:200px;
  height: 200px;
  z-index:-1;
}

Style the envelope:

.envelope {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width:200px;
  height: 200px;
  animation: bounce 1s ease infinite;
}

.envelope-back {
  position: absolute;
  background-color: #e19605;
  width:110px;
  height: 70px;
  top:80px;
  z-index:1;
}

.envelope-back:before {
  content:"";
  position: absolute;
  background-color: #e19605;
  border-radius:10px;
  width: 84px;
  height: 84px;
  top:-39px;
  left:13px;
  transform: rotate(-45deg);
}

.message {
  position: absolute;
  z-index:2;
  background-color: #eae2b7;
  width:90px;
  height: 95px;
}

.message:before {
  content:"";
  position: absolute;
  background-color: #ced4da;
  width: 75px;
  height: 3px;
  left:7.5px;
  top:12px;
  box-shadow: 0 10px #ced4da, 0 20px #ced4da, 0 30px #ced4da, 0 40px #ced4da, 0 50px #ced4da, 0 60px #ced4da, 0 70px #ced4da;
}

.envelope-front:before, .envelope-front {
  position: absolute;
  width:0;
  height:0;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
}

.envelope-front {
  border-right: 60px solid #f9c748;
  z-index:3;
  left:95px;
  top:80px;
}

.envelope-front:before {
  content:"";
  border-left: 60px solid #f9c748;
  left:-50px;
  top:-35px;
}

.envelope-front:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-bottom: 45px solid #fcb933;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
  left:-50px;
  top:-10px;
}

Add the shadow:

.shadow {
  position: absolute;
  width: 110px;
  height: 10px;
  background-color: rgba(0,0,0,0.4);
  border-radius:50%;
  top:145px;
  left:45px;
  z-index:-2;
  animation: scale 1s linear infinite;
}

Step3.

Add CSS Animation

 @keyframes bounce {
        0%   { transform: scale(1,1) translateY(0); }
        10%  { transform: scale(1.1,.9) translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-55px);}
        50%  { transform: scale(1.05,.95) translateY(0); }
        58%  { transform: scale(1,1) translateY(-7px); }
        65%  { transform: scale(1,1) translateY(0);}
        100% { transform: scale(1,1) translateY(0);}
    }

@keyframes scale {
  0% {transform: scaleX(1);}
  10% {transform: scaleX(1);}
  30% {transform: scaleX(0.5);}
  50% {transform: scaleX(1.1);}
  58% {transform: scaleX(1);}
  75% {transform: scaleX(0.98);}
  100% {transform: scaleX(1);}
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Bouncing Text Animation

CSS Bouncing Basketball

Pure CSS Envelope (Open/Close on click)

Categories
CSS HTML Web development

HTML & CSS Clock Animation

HTML & CSS Clock Animation

To learn how to create the CSS Clock Animation follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Clock Animation on the website click here.

Step1.

Add HTML

<div class="clock">
  <div class="face"></div>
  <div class="hr"></div>
  <div class="hrTwo"></div>
  <div class="hands"></div>
  <div class="seconds"></div>
  <div class="parts"></div>
  <div class="top"></div>
  <div class="bell"></div>
  <div class="shadow"></div>
</div>

Step1.

Add CSS

Set the colour and the position of the background and elements:

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock {
  position: relative;
  width: 350px;
  height: 350px;
  background-color: #94d2bd;
  overflow: hidden;
}

Style the clock:

.face {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 20px solid #bb3e03;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:5;
}

.face:before, .face:after {
  content:"";
  position: absolute;
  background-color: #001219;
  border-radius:3px;
}

.face:before {
  width: 10px;
  height:20px;
  left: 50%;
  transform: translate(-50%,-50%);
  top:15px;
  box-shadow: 0 150px #001219;
}

.face:after {
  width: 20px;
  height:10px;
  top: 50%;
  transform: translate(-50%,-50%);
  left:15px;
  box-shadow: 150px 0 #001219;
}

.hr, .hrTwo {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:5;
}

.hr:before, .hr:after, .hrTwo:before, .hrTwo:after {
  content:"";
  position: absolute;
  background-color: #ced4da;
  border-radius:3px;
  width: 5px;
  height:20px;
}

.hr:before {
  left: 70%;
  transform: translate(-50%,-50%);
  top:16px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(30deg);
}

.hr:after {
  left: 85%;
  transform: translate(-50%,-50%);
  top:41px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(60deg);
}

.hrTwo:before {
  left: 28%;
  transform: translate(-50%,-50%);
  top:14px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(-30deg);
}

.hrTwo:after {
  left: 13%;
  transform: translate(-50%,-50%);
  top:39px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(-60deg);
}

.hands {
  position: absolute;
  z-index:7;
  width: 45px;
  height: 8px;
  background-color: #001219;
  left:130px;
  top:171px;
  border-radius: 5px 0 0 5px;
}

.hands:before {
  position: absolute;
  content:"";
  background-color: #001219;
  width: 60px;
  height: 7px;
  left:40px;
  top:13.5px;
  transform: rotate(25deg);
  border-radius: 0 5px 5px 0;
}

.seconds {
  position: absolute;
  width: 180px;
  height: 180px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:9;
}

.seconds:before {
  content:"";
  position: absolute;
  background-color: #ae2012;
  width:4px;
  height: 75px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transform-origin: top;
}

.seconds:after {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: #ced4da;
  width: 17px;
  height: 17px;
  border: 5px solid #adb5bd;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.parts {
  position: absolute;
  z-index:2;
  background-color: #001219;
  width: 10px;
  height: 30px;
  left:170px;
  top:40px;
}

.parts:before, .parts:after {
  content:"";
  position: absolute;
  background-color: #001219;
  width: 15px;
  height: 35px;
  border-radius: 0 0 10px 10px;
  top:215px;
}

.parts:before {
  left:-60px;
  transform: rotate(20deg);
}

.parts:after {
  left: 60px;
  transform: rotate(-20deg);
}

.top {
  position: absolute;
  background-color: #bb3e03;
  width: 25px;
  height: 10px;
  border-radius:3px;
  top:40px;
  left:162px;
  z-index:3;
}

.top:before, .top:after {
  content:"";
  position: absolute;
  background-color: #001219;
  width: 12px;
  height: 55px;
  border-radius: 10px 10px 0 0;
  top:-10px;
}

.top:before {
  left:-45px;
  transform: rotate(-25deg);
}

.top:after {
  left:55px;
  transform: rotate(25deg);
}

.bell {
  position: absolute;
  z-index:4;
}

.bell:before, .bell:after {
  content:"";
  position: absolute;
  background-color: #bb3e03;
  width: 60px;
  height: 25px;
  border-radius: 20px 20px 0 0;
  top:-178px;
}

.bell:before {
  left:91px;
  transform: rotate(-25deg);
}

.bell:after {
  left:196px;
  transform: rotate(25deg);
}
Pure CSS Clock Animation

Animate the second hand using the CSS steps() Function:

Add on the end of the .seconds:before the following properties:

animation: sec 60s infinite;
animation-timing-function: steps(60,end);

and @keyframes:

@keyframes sec {
  from {transform: rotate(0);}
  to {transform: rotate(360deg);}
}

Add the shadow:

.clock:before, .clock:after {
  content:"";
  position: absolute;
  
}

.clock:before {
  width:280px;
  height: 305px;
  top:60px;
  left: 75px;
  transform: skew(40deg, -13.5deg);
  background-color: #6f9487;
}

.clock:after {
  background-color: #94d2bd;
  width:300px;
  height:300px;
  transform: rotate(-65deg) skew(-5deg);
  left:-110px;
  top:-65px;
}

.shadow {
  position: absolute;  
}

.shadow:before, .shadow:after {
  content:"";
  position: absolute;
  height: 0;
  z-index:1;
  border-right: 45px solid transparent;
  top:-170px;
}

.shadow:before {
  border-bottom: 50px solid #6f9487;
  left:177px;
  width:10px;
}

.shadow:after {
  border-bottom: 50px solid #6f9487;
  left:130px;
  width:20px;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS & JavaScript Digital Clock

What time is it? – CSS Analog Clock Animation

Countdown Timer

Categories
CSS HTML Web development

HTML & CSS Birthday Card

HTML & CSS Birthday Card

To create the HTML & CSS Birthday card follow the steps below and watch the video tutorial:

Demo:

*to see the HTML & CSS Birthday card on the website click here.

Step1.

Add HTML

<div class="birthday-card">
  <div class="card">
    <div class="cake">
    <div class="cake-bottom"></div>
    <div class="cake-middle"></div>
    <div class="cake-top"></div>
      <div class="candle"></div>
      <div class="flame"></div>
      <div class="shadow"></div>
    </div>
    <div class="confetti">
      <div class="squareOne"></div>
      <div class="squareTwo"></div>
      <div class="squareThree"></div>
      <div class="squareFour"></div>
      <div class="squareFive"></div>
      <div class="squareSix"></div>
      <div class="squareSeven"></div>
      <div class="squareEight"></div>
      <div class="squareNine"></div>
      <div class="squareTen"></div>
    </div>
    <div class="text">Happy Birthday!</div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.birthday-card {
  position: relative;
}

Create a card:

.card {
  background-color: #ffd166;
  overflow: hidden;
  width: 380px;
  height: 380px;
  box-shadow: 7px 7px 7px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: .2s;
}

.card:hover {
  transform: scale(1.1);
}
HTML & CSS Birthday Card

Style the cake:

.card:before {
  content:"";
  position: absolute;
  height: 5px;
  width: 250px;
  background-color: #fff;
  border-radius:10px;
  top:340px;
  left:65px;
}

.cake {
  position: relative;
  top:40px;
}

.card:after {
  content:"";
  position: absolute;
  height: 5px;
  border-radius: 0 10px 10px 0;
  width: 122px;
  background-color: rgba(0,0,0,0.1);
  top:340px;
  left:193px;
}

.cake-bottom {
  position: absolute;
  width:200px;
  height: 60px;
  background-color: #06d6a0;
  top:240px;
  left:91px;
  border-radius: 7px 7px 0 0;
  overflow: hidden;
}

.cake-bottom:after {
  content:"";
  position: absolute;
  width: 30px;
  height: 15px;
  left:-5px;
  border-radius: 0 0 50px 50px;
  background-color: white;
  box-shadow: 30px 0 white, 60px 0 white, 90px 0 white, 120px 0 white, 150px 0 white, 180px 0 white;
}

.cake-bottom:before {
  content:"";
  position: absolute;
  background-color: #ef476f;
  width: 30px;
  height: 60px;
  left:25px;
  box-shadow: 60px 0 #ef476f, 120px 0 #ef476f;
}

.cake-middle {
  position: absolute;
  width: 150px;
  height: 60px;
  background-color: #118ab2;
  border-radius: 7px 7px 0 0;
  top:180px;
  left:117px;
  box-shadow: inset 0 -20px #073b4c;
  overflow: hidden;
}

.cake-middle:before {
  content:"";
  position:absolute;
  background-color: #ef476f;
  border-radius:50%;
  width:10px;
  height: 10px;
  top:20px;
  left: 10px;
  box-shadow: 15px 10px #ffd166, 30px 0 #06d6a0, 45px 10px #ef476f, 60px 0 #ffd166, 75px 10px #06d6a0, 90px 0 #ef476f, 105px 10px #ffd166, 120px 0 #06d6a0;
}

.cake-middle:after {
  content:"";
  position: absolute;
  width: 30px;
  height: 15px;
  left:0;
  border-radius: 0 0 50px 50px;
  background-color: white;
  box-shadow: 30px 0 white, 60px 0 white, 90px 0 white, 120px 0 white;
}

.cake-top {
  position: absolute;
  width:100px;
  height: 60px;
  background-color: #ef476f;
  border-radius: 7px 7px 0 0;
  top:120px;
  left:143px;
  overflow: hidden;
  box-shadow: inset 0 20px #118ab2;
}

.cake-top:before {
  content:"";
  position: absolute;
  background-color: #118ab2;
  width: 15px;
  height:35px;
  left:-5px;
  border-radius:20px;
  box-shadow: 15px 10px #ef476f, 30px 5px #118ab2, 45px 5px #ef476f,60px -10px #118ab2, 75px 10px #ef476f, 90px 0 #118ab2; 
}

.cake-top:after {
  position: absolute;
  content:"";
  background-color: rgba(0,0,0,0.1);
  width:50px;
  border-radius: 0 7px 0 0;
  height: 60px;
  left:50px;
}
CSS Birthday Cake

Add the candle and flame:

.candle {
  position: absolute;
  background: repeating-linear-gradient(-45deg, white, white 5px,
  #06d6a0 5px, #06d6a0 10px);
  width:10px;
  height: 40px;
  border-radius: 3px 3px 0 0;
  top:80px;
  left:188px;  
}

.candle:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:1px;
  height:10px;
  top:-10px;
  left:4px;
}

.flame {
  position: absolute;
  opacity:0.7;
}

.flame:before {
  content:"";
  position: absolute;
  background-color: #fb5607;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  transform: rotate(-45deg);
  width:20px;
  height:20px;
  top:55px;
  left:183px;
  animation: scale .5s linear infinite;
}

.flame:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #ffbe0b;
  width: 11px;
  height: 11px;
  top:61px;
  left:187.5px;
  animation: scale .5s linear infinite;
}
CSS birthday card

Animate the flame:

@keyframes scale {
  0% {transform: scaleY(1) rotate(-45deg);}
  25% {transform: scaleY(1.3) rotate(-45deg);}
  50% {transform: scaleY(1) rotate(-45deg);}
  75% {transform: scaleY(1.3) rotate(-45deg);}
  100% {transform: scaleY(1) rotate(-45deg);}
}

Add the shadow:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  height: 60px;
  width: 74px;
  border-radius:0 7px 0 0;
  top:180px;
  left:193px;
}

.shadow:before, .shadow:after {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.1);
}

.shadow:before {
  height: 60px;
  width:98.5px;
  border-radius:0 7px 0 0;
  top:60px;
}

.shadow:after {
  height: 40px;
  width:5px;
  border-radius: 0 5px 0 0;
  top:-100px;
}

Add and animate the confetti:

.confetti {
  position: absolute;
  width: 380px;
  height: 380px;
  overflow: hidden;
}

.squareOne, .squareTwo, .squareThree, .squareFour, .squareFive, .squareSix, .squareSeven, .squareEight, .squareNine, .squareTen {
  position: absolute;
  width: 10px;
  height: 25px;
  top:-110px;
}

.squareOne {
  background-color: #ef476f;
  animation: down 2.5s linear infinite;
  left:50px;
}

.squareTwo {
  background-color: #06d6a0;
  animation: down 2.3s linear infinite .2s;
  left:150px;
}

.squareThree {
  background-color: #118ab2;
  animation: down 2.4s linear infinite .4s;
  left:250px;
}

.squareFour {
  background-color: #ffbe0b;
  animation: down 2.7s linear infinite .1s;
  left:300px;
}

.squareFive {
  background-color: #118ab2;
  animation: down 2.6s linear infinite .7s;
  left:5px;
}

@keyframes down {
  0% {top:-110px; transform: rotate(0deg) rotateY(-90deg);opacity:1;}
  100% {top:400px; transform: rotate(360deg) rotateY(180deg);opacity:0.5;}
}

@keyframes downTwo {
  0% {top:-130px; transform: rotate(0deg) rotateY(90deg);opacity:1;}
  100% {top:400px; transform: rotate(-360deg) rotateY(-180deg);opacity:0.5;}
}


.squareSix {
  background-color: #ffbe0b;
  animation: downTwo 2.4s linear infinite .2s;
  left:70px;
}

.squareSeven {
  background-color: #ef476f;
  animation: downTwo 2.1s linear infinite .7s;
  left:170px;
}

.squareEight {
  background-color: #ef476f;
  animation: downTwo 2.4s linear infinite .9s;
  left:280px;
}

.squareNine {
  background-color: #06d6a0;
  animation: downTwo 2.9s linear infinite .9s;
  left:50px;
}

.squareTen {
  background-color: #118ab2;
  animation: downTwo 2.2s linear infinite 1.1s;
  left:350px;
}

Style the text:

.text {
  position: absolute;
  font-family: tahoma;
  font-size: 35px;
  z-index:1;
  font-weight: bold;
  width: 380px;
  text-align: center;
  top:30px;
  color: #073b4c;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Folded Birthday Card

CSS Birthday Animation

Simple CSS Birthday Cake

Categories
CSS HTML Web development

CSS Winter window scene

CSS winter snowfall

Demo:

*to see the animation on the website click here.

To create the CSS Window winter scene animation follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
  <div class="window">
    <div class="frame">
      <div class="snow">
        <div class="snowflake1"></div>
        <div class="snowflake2"></div>
        <div class="snowflake3"></div>
        <div class="snowflake4"></div>
        <div class="snowflake5"></div>
      </div>
      <div class="hills"></div>
      <div class="tree"></div>
      <div class="tree2"></div>
      <div class="tree3"></div>
      <div class="tree4"></div>
      <div class="shine"></div>
    </div>
    <div class="sill"></div>
    <div class="knob"></div>
    <div class="mug"></div>
    <div id="up" class="steam"></div>
    <div id="up" class="steam2"></div>
    <div id="up" class="steam3"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background, and the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e9c46a;
}
.container {
  position: relative;
}

Style the window:

.window {
  position: relative;
}

.frame {
  position: relative;
  width: 350px;
  height: 250px;
  border: 5px solid #e9ecef;
  background-color: #48cae4;
  overflow:hidden;
}

.hills {
  position: absolute;
  background-color: #90e0ef;
  width: 550px;
  height:250px;
  border-radius:50%;
  top:80px;
  left:-100px;
}

.hills:before {
  position: absolute;
  content:"";
  background-color: #ade8f4;
  width: 1000px;
  height:250px;
  border-radius:50%;
  left:50px;
  top:20px;
}

.hills:after {
  content:"";
  position: absolute;
  background-color: #caf0f8;
  width: 800px;
  height:250px;
  border-radius:50%;
  left:-200px;
  top:100px;
}

.tree {
  position: absolute;
  width:3px;
  height:15px;
  background-color: #432818;
  top:170px;
  left:75px;
}

.tree:before {
  content:"";
  position: absolute;
  border-bottom:40px solid #2c6e49;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  width:0;
  height:0;
  left:-8px;
  top:-30px;
}

.tree:after {
  content:"";
  position: absolute;
  width:2px;
  height:15px;
  background-color: #432818;
  top:-60px;
  left:75px;
}

.tree2 {
  position: absolute;
  border-bottom:35px solid #4c956c;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  width:0;
  height:0;
  top:85px;
  left:144px;
}

.tree2:before {
  content:"";
  position: absolute;
  width:1.5px;
  height:15px;
  background-color: #432818;
  top:-12px;
  left:115px;
}

.tree2:after {
  content:"";
  position: absolute;
  border-bottom:27px solid #2c6e49;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width:0;
  height:0;
  top:-28px;
  left:110px;
}

.tree3 {
  position: absolute;
  width:1.5px;
  height:15px;
  background-color: #432818;
  top:85px;
  left:25px;
}

.tree3:before {
  content:"";
  position: absolute;
  border-bottom:20px solid #4c956c;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width:0;
  height:0;
  top:-8px;
  left:-5px;
}

.tree3:after {
  content:"";
  position: absolute;
  width:1.5px;
  height:15px;
  background-color: #432818;
  left:17px;
  top:-5px;
}

.tree4 {
  position: absolute;
  border-bottom:27px solid #2c6e49;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width:0;
  height:0;
  top:64px;
  left:37px;
}

.tree4:before {
  content:"";
  position: absolute;
  width:1.5px;
  height:15px;
  background-color: #432818;
  left:147px;
  top:40px;
}

.tree4:after {
  content:"";
  position: absolute;
  border-bottom:27px solid #2c6e49;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width:0;
  height:0;
  top:23px;
  left:142px;
}

.shine {
  position: absolute;
  width: 200px;
  height:100px;
  background-color: rgba(255,255,255,0.2);
  transform: skew(-20deg,-50deg);
  top:50px;
  left:-10px;
}

.shine:before {
  content:"";
  position: absolute;
  width: 200px;
  height:100px;
  background-color: rgba(255,255,255,0.2);
  top:400px;
  left:320px;
}

.sill {
  position: absolute;
  left:-20px;
  width:400px;
  height:10px;
  background-color: #c5c3c6;
  z-index:15;
  box-shadow: 5px 7px 0 rgba(0,0,0,0.05);
}

.sill:before {
  width:340px;
  height:240px;
  border: 5px solid white;
  content:"";
  position: absolute;
  top:-300px;
  left:25px;
  top:-255px;
  box-shadow:inset 5px 5px rgba(0,0,0,0.05);
}

.sill:after {
  content:"";
  position: absolute;
  background-color: white;
  height: 240px;
  width:10px;
  left:193px;
  top:-250px;
  box-shadow:5px 1px rgba(0,0,0,0.05);
}

.knob {
  position: absolute;
  width:30px;
  height:10px;
  border-radius:10px;
  background-color: #c5c3c6;
  z-index:20;
  top:135px;
  left:175px;
}

Add cup of hot tea:

.mug {
  position: absolute;
  background-color: #db504a;
  width:28px;
  height: 35px;
  border-radius:5px 5px 10px 10px;
  z-index:25;
  top:225px;
  left:250px;
  box-shadow:inset -5px -5px rgba(0,0,0,0.05);
}

.mug:before {
  content:"";
  position: absolute;
  border:5px solid #db504a;
  width:15px;
  height:15px;
  border-radius:50%;
  left:-10px;
  top:5px;
}

#up {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #F3F1E7;
  border-radius: 50%;
  opacity: 0;
  top: 220px;
  left: 255px;
  z-index:20;
}

.steam {
  animation: up 3s ease-out infinite; 
}

.steam2 {
  animation: up 2s ease-out infinite; 
  animation-delay:0.5s;
}

.steam2:before {
  content:"";
  position: absolute;
  left:5px;
  width:15px;
  height:15px;
  background-color: #fff;
  border-radius:50%;
  top:20px;
}

and some snowflakes:

.snow {
  position: absolute;
}

.snowflake1, .snowflake2, .snowflake3, .snowflake4, .snowflake5 {
  width:5px;
  height:5px;
  border-radius:50%;
  opacity:0.7;
  position: absolute;
  z-index:10;
  background-color: white;
}

.snowflake1 {
  animation: fall 4s linear infinite;
  box-shadow: 100px -10px white, 200px -5px white, -20px -35px white, 250px -50px white, 240px -150px white, 40px -130px white;
  left:50px;
}

.snowflake2 {
  animation: fall 5s linear infinite;
  animation-delay:2s;
  top:-55px;
  box-shadow: 75px -10px white, 163px -10px white, -20px -35px white, 250px -50px white, 240px -150px white, 40px -130px white;
  left:30px;
}

.snowflake3 {
  animation: fall 4.5s linear infinite;
  animation-delay:1s;
  top:-85px;
  box-shadow: 90px -10px white, 180px -15px white, -20px -35px white, 230px -50px white, 10px -140px white, 70px -120px white;
  left:60px;
}

.snowflake4 {
  animation: fall 3.5s linear infinite;
  top:-115px;
  box-shadow: 70px -20px white, 140px -5px white, -20px -35px white, 230px -50px white, 110px -80px white, 99px -25 white;
  left:80px;
}

.snowflake5 {
  animation: fall 2.9s linear infinite;
  animation-delay:3s;
  top:-145px;
  box-shadow: 190px -10px white, 280px -15px white, 320px -35px white, 230px -50px white, 113px -100px white, 256px -50px white, 116px -50px white;
  left:-5px;
}

Step3.

CSS Animation

To create Snowfall:

@keyframes fall {
    100% {transform: translateY(400px);}
}

To add to the hot drink steam:

@keyframes up {
  0%{
    transform: translateY(0) scale(0.5);
    opacity: 0.9;
  }
  100%{
    transform: translateY(-50px) scale(1);
    opacity: 0;
  }
}

Watch also the video tutorial:

Enjoy coding!

Read also:

JS Canvas Snow Animation

CSS Christmas Tree Snow Globe

CSS Christmas Tree

Categories
CSS Web development

CSS Snowfall

CSS Snowfall

Demo:

*to see the CSS Snowfall animation on the website click here.

What do you need to do?

To create the CSS Snowfall animation follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

Create the container, and add snow layers:

<div id="snowfall">
  <div class="snow"></div>
  <div class="snow1"></div>
  <div class="snow2"></div>
</div>
  

Step2.

Add CSS

Set the colour and the size of the background and elements:

body {
  height: 100vh;
  background-image: linear-gradient(0deg, #fff 0%, #73bfdc 100%);
}

Set the size and the position of the container:

#snowfall {
  position: absolute;
  width: 100%;
  height: 100px;
}

Add the snowflakes:

.snow {
  position: absolute;
  border-radius:50%;
  filter: blur(1px);
  background-color: #fff;
  width: 10px;
  height: 10px;
  top:-1000px;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  animation: snowfall 7s linear infinite;
}

.snow:before {
  content:"";
  width:7px;
  height:7px;
  position: absolute;
  background-color: #fff;
  left: 200px;
  top:-150px;
  border-radius:50%;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  
}

.snow:after {
  content:"";
  width:5px;
  height:5px;
  position: absolute;
  background-color: #fff;
  left: 300px;
  top:-250px;
  border-radius:50%;
  filter: blur(1px);
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
}
.snow1 {
  position: absolute;
  border-radius:50%;
  filter: blur(2px);
  background-color: #fff;
  width: 9px;
  height: 9px;
  top:-850px;
  left:123px;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  animation-delay:-3s;
  animation: snowfall 9s linear infinite;
}

.snow1:before {
  content:"";
  width:7px;
  height:7px;
  position: absolute;
  background-color: #fff;
  left: 200px;
  top:-350px;
  border-radius:50%;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  
}

.snow1:after {
  content:"";
  width:5px;
  height:5px;
  position: absolute;
  background-color: #fff;
  left: 300px;
  top:-450px;
  border-radius:50%;
  filter: blur(1px);
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
}

.snow2 {
  position: absolute;
  border-radius:50%;
  filter: blur(1.5px);
  background-color: #fff;
  width: 9px;
  height: 9px;
  top:-900px;
  left:-50px;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  animation-delay:-4s;
  animation: snowfall 14s linear infinite;
}

.snow2:before {
  content:"";
  width:7px;
  height:7px;
  position: absolute;
  background-color: #fff;
  left: 200px;
  top:-550px;
  border-radius:50%;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  
}

.snow2:after {
  content:"";
  width:5px;
  height:5px;
  position: absolute;
  background-color: #fff;
  left: 300px;
  top:-650px;
  border-radius:50%;
  filter: blur(1px);
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
}

Step3.

Add CSS Animation

@keyframes snowfall {
    100% {transform: translateY(1500px);}
}

Enjoy coding!

Read also:

CSS Winter window scene

JS Canvas Snow Animation

CSS Christmas Card

Categories
CSS HTML Web development

CSS Christmas Tree

CSS Christmas Tree

Christmas is coming! Do you have your Christmas tree ready?

*animation opened in the Firefox browser.
*to see the animation on the website click here.

Demo:

To create the CSS Christmas Tree animation follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="christmas">
  <div class="tree">
    <div class="chain"></div>
    <div class="chain2"></div>
  </div>
  <div class="lights">
    <div class="light1"></div>
    <div class="light2"></div>
    <div class="light3"></div>
    <div class="light4"></div>
    <div class="light5"></div>
    <div class="light6"></div>
    <div class="light7"></div>
    <div class="light8"></div>
    <div class="light9"></div>
    <div class="light10"></div>
  </div>
  <div class="balls">
    <div class="ball1"></div>  
  </div>
  <div class="star"></div>
  <div class="gift"></div>
  <div class="ribbon"></div>
  <div class="gift2"></div>
  <div class="ribbon2"></div>
  <div class="gift3"></div>
  <div class="ribbon3"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  background-color: #00509d;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.christmas {
  position: relative;
}

Style the Christmas tree:

.tree {
  position: relative;
  background-color: #685044;
  width: 30px;
  height:80px;
  top:100px;
  transform-style: preserve-3d;
}

.tree:before {
  content:"";
  position: relative;
  width: 0;
  height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 270px solid #127475;
  border-radius: 30px;
  top:-250px;
  left:-75px;
}

.tree:after {
  content:"";
  position: relative;
  width: 0;
  height: 0;
  border-right: 90px solid transparent;
  border-bottom: 270px solid #0e9594;
  border-bottom-right-radius: 30px;
  top:-250px;
  left:-165px;
}
.shadow {
  background-color: rgba(0,0,0,0.07);
  position: absolute;
  width: 250px;
  height: 30px;
  border-radius:50%;
  top:170px;
  left:-115px;
  z-index:-1;
}

Add the Christmas decorations:

.chain {
  width: 85px;
  height: 85px;
  border: solid 3px #333;
  border-radius: 50%;
  top: -185px; 
  left: -35px; 
  position: absolute;
  transform: rotate3d(8, 0.1, -5, 75deg); 
  box-sizing: border-box;
  backface-visibility: visible !important;
  z-index:5;
}

.chain2 {
  width: 145px;
  height: 135px;
  border: solid 3px #333;
  border-radius: 50%;
  top: -115px; 
  left: -65px; 
  position: absolute;
  transform: rotate3d(8, 0.1, -5, 75deg); 
  box-sizing: border-box;
  backface-visibility: visible !important;
  z-index:5;
  
}
CSS Xmas Tree

Add the Christmas lights:

.lights {
  position: absolute;
  
}

.light1 {
   position: absolute;
   width: 15px; 
   height: 15px;
   border-radius: 10px 150px 30px 150px;
}

.light1 {
  background-color: #ff595e;
  top:-100px;
  left:-35px;
  transform: rotate(40deg);
  box-shadow: 1px 1px 15px #faf3dd;
}

.light2 {
  position: absolute;
  background-color: #ffca3a;
  top:-95px;
  left:-10px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light3 {
  position: absolute;
  background-color: #6a4c93;
  top:-105px;
  left:15px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light4 {
  position: absolute;
  background-color: #1982c4;
  top:-118px;
  left:35px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light5 {
  position: absolute;
  background-color: #1982c4;
  top:12px;
  left:-55px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light6 {
  position: absolute;
  background-color: #8ac926;
  top:15px;
  left:-25px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light7 {
  position: absolute;
  background-color: #ff595e;
  top:10px;
  left:2px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light8 {
  position: absolute;
  background-color: #ffca3a;
  top:-2px;
  left:27px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light9 {
  position: absolute;
  background-color: #9e0059;
  top:-17px;
  left:50px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light10 {
  position: absolute;
  background-color: #4361ee;
  top:-40px;
  left:68px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}
CSS Christmas Tree

and the star on the top:

.star {
  margin: 50px 0;
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-bottom: 17.5px solid #f9dc5c;
  border-left: 25px solid transparent;
  transform: rotate(35deg);
  top:-190px;
  left:-9px;
    }

.star:before {
      border-bottom: 20px solid #f9dc5c;
      border-left: 7.5px solid transparent;
      border-right: 7.5px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -12.5px;
      left: -17.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

.star:after {
      position: absolute;
      display: block;
      top: 0.75px;
      left: -26.25px;
      width: 0px;
      height: 0px;
      border-right: 25px solid transparent;
      border-bottom: 17.5px solid #f9dc5c;
      border-left: 25px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }
CSS Christmas Tree Animation

Style the gifts:

.gift {
  position: absolute;
  width: 60px;
  height: 50px;
  background-color: #ffc857;
  top:130px;
  left:30px;
  box-shadow: inset -8px 0 0 rgba(0,0,0,0.07);
  
}

.gift:before {
  content:"";
  position: absolute;
  width:70px;
  height:15px;
  background-color: #ffc857;
  left:-5px;
  box-shadow: inset -8px -4px 0 rgba(0,0,0,0.07);
  
}

.gift:after {
  content:"";
  background-color: #db3a34;
  width: 10px;
  height:50px;
  position: absolute;
  left:25px;
}

.ribbon {
  position: absolute;
  width: 20px;
  height: 10px;
  border: 3px solid #db3a34;
  border-radius:50%;
  transform: skew(15deg, 15deg);
  top:116px;
  left:35px;
}

.ribbon:before {
  content:"";
  position: absolute;
  width: 20px;
  height: 10px;
  border: 3px solid #db3a34;
  border-radius:50%;
  transform: skew(-15deg, -20deg);
  left:22px;
  top:-8px;
}

.gift2 {
  position: absolute;
  width: 50px;
  height: 40px;
  background-color: #08bdbd;
  top:140px;
  left:-65px;
  box-shadow: inset -8px 0 0 rgba(0,0,0,0.07);
  
}

.gift2:before {
  content:"";
  position: absolute;
  width:60px;
  height:15px;
  background-color: #08bdbd;
  left:-5px;
  box-shadow: inset -8px -4px 0 rgba(0,0,0,0.07);
  
}

.gift2:after {
  content:"";
  background-color: #abff4f;
  width: 10px;
  height:40px;
  position: absolute;
  left:15px;
}

.gift3 {
  position: absolute;
  width: 40px;
  height: 30px;
  background-color: #7678ed;
  top:150px;
  left:-85px;
  box-shadow: inset -8px 0 0 rgba(0,0,0,0.07);
  
}

.gift3:before {
  content:"";
  position: absolute;
  width:50px;
  height:10px;
  background-color: #7678ed;
  left:-5px;
  box-shadow: inset -8px -4px 0 rgba(0,0,0,0.07);
  
}

.gift3:after {
  content:"";
  background-color: #f7b801;
  width: 7px;
  height:30px;
  position: absolute;
  left:15px;
}

.ribbon2 {
  position: absolute;
  width: 15px;
  height: 7px;
  border: 3px solid #abff4f;
  border-radius:50%;
  transform: skew(15deg, 15deg);
  top:129px;
  left:-65px;
}

.ribbon2:before {
  content:"";
  position: absolute;
  width: 15px;
  height: 7px;
  border: 3px solid #abff4f;
  border-radius:50%;
  transform: skew(-15deg, -20deg);
  left:15px;
  top:-8px;
}

.ribbon3 {
  position: absolute;
  width: 12px;
  height: 5px;
  border: 3px solid #f7b801;
  border-radius:50%;
  transform: skew(15deg, 15deg);
  top:142px;
  left:-85px;
}

.ribbon3:before {
  content:"";
  position: absolute;
  width: 12px;
  height: 5px;
  border: 3px solid #f7b801;
  border-radius:50%;
  transform: skew(-15deg, -20deg);
  left:15px;
  top:-8px;
}

and add some Christmas balls:

Pure CSS Christmas Tree

Step3.

Add CSS Animation

To add some flash to Christmas lights:

.light1, .light2, .light3, .light4, .light5, .light6, .light7, .light8, .light9, .light10 {
  -webkit-animation: flash 10s infinite;
}

@-webkit-keyframes flash {
  20%, 24%, 55% {box-shadow: none;}
 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
 box-shadow: 0 0 5px #f5de93, 0 0 15px #f5de93, 0 0 20px #f5de93, 0 0 40px #f5de93, 0 0 60px #decea4, 0 0 10px #d6c0a5, 0 0 98px #ff0000;
  }
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Winter window scene

CSS Christmas Tree Snow Globe

CSS Snowfall