Tag: CSS animation

Web development

Pure CSS Snow Globe

Post author By Lena Stanley
Post date December 3, 2021

To learn how to create the CSS Snow Globe follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="snow-ball">
  <div class="snow-globe">
  <div class="ball-container">
    <div class="cottage">
      <div class="roof"></div>
      <div class="window"></div>
      <div class="chimney">
        <div id="up" class="smoke"></div>
        <div id="up" class="smoke2"></div>
      </div>
    </div>
    <div class="snowman">
      <div class="scarf"></div>
      <div class="hat"></div>
    </div>
    <div class="trees"></div>
    <div class="trees2"></div>
    <div class="reflection"></div>
    <div class="snowfall">
      <div class="snowflake"></div>
      <div class="snowflake1"></div>
      <div class="snowflake2"></div>
    </div>
  </div>
  <div class="holder"></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;
  background-color: #ade8f4;
  overflow: hidden;
}

.snow-ball {
  position: relative;
  top:-15px;
}

Style the snow globe:

.ball-container {
  position: relative;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.3);
  overflow: hidden;
}

.ball-container:before {
  content:"";
  position: absolute;
  background-color: #f2f2f2;
  width:350px;
  height: 110px;
  top:275px;
}

.ball-container:after {
  content:"";
  position: absolute;
  background-color: white;
  border-radius: 50%;
  width:324px;
  height:40px;
  top:255px;
  left:23px;
}

Style the cottage:

.cottage {
  position: absolute;
  z-index:2;
  width: 80px;
  height: 40px;
  background-color: #aca081;
  box-shadow: -40px 0 #8d826c;
  top:230px;
  left:120px;
}

.cottage:before {
  content:"";
  position: absolute;
  background-color: #aca081;
  width:57.5px;
  height: 57.5px;
  transform: rotate(45deg);
  top:-28px;
  left:11px;
}

.cottage:after {
  content:"";
  position: absolute;
  background-color: #e7e7e7;
  box-shadow: -40px 0 #c0c0c0;
  width: 80px;
  height:20px;
  top:22px;
}

.roof {
  position: absolute;
  background-color: rgba(0,0,0,0.2);
  width:40px;
  height: 5px;
  left:-40px;
}

.roof:before {
  content:"";
  position: absolute;
  background-color: white;
  border-radius: 5px 0px 0px 5px;
  width:50px;
  height: 43px;
  top:-43px;
  transform: skew(-45deg);
  left:13px;
}

.roof:after {
  content:"";
  position: absolute;
  transform: skew(45deg);
  background-color: white;
  width: 7px;
  height: 43px;
  border-radius: 0 2px 5px 0;
  top:-43px;
  left:98px;
}

.window {
  position: absolute;
  width: 23px;
  height: 23px;
  background-color: #fff7c2;
  top:-5px;
  left:30px;
  box-shadow: 10px 0 #625f56, -10px 0 #625f56;
}

.window:before {
  content:"";
  position: absolute;
  width: 23px;
  height: 2px;
  background-color: #c5bb97;
  top:11px;
}

.window:after {
  content:"";
  position: absolute;
  width: 2px;
  height: 23px;
  background-color: #c5bb97;
  top:0;
  left:10.3px;
}

.chimney {
  position: absolute;
  background-color: #8d826c;
  width:15px;
  height:30px;
  top:-45px;
  left:-25px;
  box-shadow: 0 -5px #625f56;
  z-index:3;
}

.chimney:before {
  content:"";
  position: absolute;
  width:10px;
  height: 5px;
  background-color: #bfaf94;
  border-radius:10px;
  top: 15px;
  left: 60px;
  box-shadow: 5px 10px #bfaf94, -8px 15px #bfaf94, -28px 25px #bfaf94, -32px 35px #bfaf94, 20px 17px #bfaf94, 30px 30px #bfaf94, 32px 40px #bfaf94,-28px 44px #bfaf94, -50px 37px #7d7360, -55px 44px #7d7360, -70px 41px #7d7360;
}

.chimney:after {
  content:"";
  position: absolute;
  background-color: white;
  width:45px;
  height: 10px;
  top:62px;
  left:44px;
  border-radius:5px;
}

And add smoke from the chimney:

#up {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #e5e5e5;
  border-radius: 50%;
  opacity: 0;
  top: -25px;
  left: -5px;
  z-index:-1;
}

.smoke {
  animation: up 2.5s ease-out infinite; 
}

.smoke2 {
  animation: up 1.7s ease-out infinite 1s; 
}

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

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

Style trees and the snowman:

.trees {
  position: absolute;
  background-color: white;
  width:20px;
  height:45px;
  border-radius:10px;
  left:50px;
  top:210px;
  z-index:3;
  box-shadow: 160px -10px white;
}

.trees:before {
  content:"";
  position: absolute;
  background-color: #625f56;
  width:5px;
  border-radius:5px 5px 0 0;
  height:30px;
  left:7.5px;
  top:25px;
  box-shadow: 159.5px -10px #625f56;
}

.trees2 {
  position: absolute;
  height:0;
  width:0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 90px solid #97b2b0;
  top:165px;
  left:165px;
}

.trees2:before {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 70px solid #62827c;
  top:25px;
  left:25px;
}

.trees2:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 90px solid #62827c;
  left:-140px;
  top:20px;
}

.snowman {
  position: absolute;
  border-radius:50%;
  background-color: rgba(0,0,0,0.1);
  width:30px;
  height:10px;
  top:270px;
  left:265px;
  z-index:4;
}

.snowman:before {
  content:"";
  position: absolute;
  background-color: #f2f2f2;
  width:30px;
  height:30px;
  border-radius: 50%;
  top:-23px;
}

.snowman:after {
  content:"";
  position: absolute;
  background-color: #f2f2f2;
  width:20px;
  height:20px;
  border-radius: 50%;
  top:-40px;
  left:5px;
}

.scarf {
  position: absolute;
  width:20px;
  height:5px;
  background-color: #a5a696;
  top:-23px;
  left:5px;
  border-radius:10px;
  z-index:5;
}

.scarf:before {
  content:"";
  position: absolute;
  width:5px;
  height: 15px;
  background-color: #a5a696;
  left:5px;
  border-radius:10px;
}

.scarf:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  border-right: 10px solid #ca6702;
  top:-7px;
  left:-5px;
  transform: rotate(-10deg);
}

.hat {
  position: absolute;
  z-index:6;
  border-top: 12px solid #60676a;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  border-bottom: 5px solid transparent;
  width:15px;
  top:-52px;
  left:5px;
}

.hat:before {
  content:"";
  position: absolute;
  background-color: #60676a;
  width: 25px;
  height:3px;
  border-radius:10px;
  left:-5px;
}

.hat:after {
  content:"";
  position: absolute;
  background-color: #60676a;
  border-radius:50%;
  width:3px;
  height:3px;
  top:5px;
  box-shadow: 5px 0 #60676a;
}

Add the ball reflection and the holder with the shadow:

.reflection {
  position: absolute;
  z-index:7;
  background-color: rgba(255,255,255,0.2);
  width: 370px;
  height: 370px;
  border-radius: 50%;
  box-shadow: inset 5px 10px 20px rgba(255,255,255,0.4);
}
.holder {
  position: absolute;
  z-index:8;
  width:255px;
  height:20px;
  background-color: #625f56;
  top:335px;
  left:63px;
}

.holder:before {
  content:"";
  position: absolute;
  width: 255px;
  height:0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 60px solid #7d7360;
  top:20px;
  left:-10px;
}

.holder:after {
  content:"";
  position: absolute;
  width:285px;
  height: 5px;
  border-radius:20px;
  background-color: #625f56;
  top:75px;
  left:-15px;
}

.shadow {
  position: absolute;
  width: 370px;
  height: 10px;
  border-radius:20px;
  background-color: rgba(0,0,0,0.2);
  top:410px;
  left:4px;
  transition: .3s;
}

Create the Snowfall:

.snowfall {
  position: absolute;
  z-index:6;
}

.snowflake, .snowflake1, .snowflake2 {
  position: absolute;
  border-radius:50%;
  background-color: white;
  width: 7px;
  height: 7px;
  filter: blur(1px);
  left: 50px;
  box-shadow: 40px 40px white, -40px -40px white, 80px 60px white, 100px -70px white, 110px -20px white,20px -20px white,120px 40px white, 150px 10px white, 180px 20px white, 50px -60px white, 100px 20px white, 150px -80px white, 170px -50px white, 185px -70px white, 190px 40px white, 220px -10px white, 230px -60px white, 240px -30px white, 250px 20px white, 260px -80px white, -20px 20px white, 10px 10px white, 280px -40px white, 300px -10px white, 320px -100px white, 290px -110px white, 100px -100px white, 80px -120px white;
  animation: fall 2.5s linear infinite;
}

.snowflake {
  left:0;
}

.snowflake1 {
  top:-80px;
  left: 60px;
  animation-delay: .5s;
}

.snowflake2 {
  top: -70px;
  left: 100px;
  animation-delay: 1s;
}

@keyframes fall {
  0 {transform: translateY(-50px);opacity:0.9;}
  100% {transform: translateY(380px);opacity:0.2;}
}

Add effects on hover:

.snow-ball:hover .snow-globe {
  animation: shake .3s ease;
  animation-iteration-count: 2;
}

@keyframes shake {
  0% {transform: rotate(0);}
  25% {transform: rotate(-30deg);}
  50% {transform: rotate(0);}
  75% {transform: rotate(30deg);}
  100% {transform: rotate(0);}
}
.snow-ball:hover .shadow {
  opacity:0;
}

.snow-ball:hover .snowfall {
  animation: bounce .5s ease;
  animation-iteration-count: 2;
}

@keyframes bounce {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-20px);}
	20%, 40%, 60%, 80% {transform: translateX(20px);}
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Christmas Tree Snow Globe

CSS Winter window scene

JS Canvas Snow Animation

Tags #SnowAnimation, #Snowball, CSS, CSS animation, winter

Web development

CSS Bouncing Envelope / Contact Animation

Post author By Lena Stanley
Post date November 19, 2021

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)

Tags Bounce, CSS, CSS animation, envelope, HTML

Web development

HTML & CSS Clock Animation

Post author By Lena Stanley
Post date October 29, 2021

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>

Step2.

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);
}

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

Tags clock, clock animation, CSS, CSS animation, HTML, steps()

Web development

HTML & CSS Birthday Card

Post author By Lena Stanley
Post date October 26, 2021

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);
}

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;
}

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;
}

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

Tags birthday, birthday card, confetti, CSS, CSS animation, HTML

Web development

CSS Winter window scene

Post author By Lena Stanley
Post date January 13, 2021

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:

Add HTML
Add CSS
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

Tags CSS, CSS animation, HTML, snow, snowfall, winter

Web development

CSS Snowfall

Post author By Lena Stanley
Post date December 15, 2020

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:

Add HTML
Add CSS
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

Tags #SnowAnimation, CSS, CSS animation, snowfall, winter

Web development

CSS Christmas Tree

Post author By Lena Stanley
Post date December 10, 2020

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:

Add HTML
Add CSS
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;
  
}

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);
}

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: '';
    }

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:

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

Tags Christmas, Christmas Tree, CSS, CSS animation, HTML