Tag: snowfall

Web development

CSS Christmas Animation

Post author By Lena Stanley
Post date December 20, 2021

To learn how to create the CSS Christmas Animation follow the steps below.

Demo:

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

Step1.

Add HTML

<div class="merry-christmas">
  <div class="window">
    <div class="christmas-tree">
      <div class="star"></div>
      <div class="christmas-lights"></div>
      <div class="balls"></div>
    </div>
    <div class="curtains"></div>
    <div class="window-details"></div>
  </div>
  <div class="snow">
    <div class="snowflakes"></div>
    <div class="snowflakes-2"></div>
    <div class="snowflakes-3"></div>
    <div class="snowflakes-4"></div>
    <div class="snowflakes-5"></div>
  </div>
  <div class="bricks"></div>
</div>

Step2.

Add CSS

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

body {
  display: flex;
  height:100vh;
  align-items: center;
  justify-content: center;
  background-color: #00111c;
  overflow: hidden;
}

.merry-christmas {
  position: relative;
}

Style the window:

.window {
  position: relative;
  overflow: hidden;
  width:300px;
  height:220px;
  border: 10px solid #001523;
  background-color: #001a2c; 
}
.window-details {
 position: absolute;
 z-index:3;
 width:300px;
 height:5px;
 background-color: #001523;
 top:115px;
}

.window-details:before, .window-details:after {
  content:"";
  position: absolute;
  background-color: #001523;
  height: 220px;
  top:-115px;
}

.window-details:before {
  width:20px;
  left: 135px;
}

.window-details:after {
  width:5px;
  left:65px;
  box-shadow: 160px 0 #001523;
}

Add Christmas Tree and curtains:

.christmas-tree, .christmas-tree:before {
  position: absolute;
  width:100px;
  height:0;
  border-bottom: 50px solid #242c1d;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
}

.christmas-tree {
  top: 170px;
  left:120px;
}

.christmas-tree:before {
  content:"";
  top:-40px;
  left:-30px;
}

.christmas-tree:after {
  content:"";
  height:0;
  position: absolute;
  border-bottom: 90px solid #242c1d;
  border-right: 70px solid transparent;
  border-left: 70px solid transparent;
  top:-130px;
  left:-20px;
}

.star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-bottom: 18px solid #ffba08;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
  top:-140px;
  left:25px;
  z-index:1;
    }

.star:before {
      border-bottom: 18px solid #ffba08;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -10px;
      left: -17px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

.star:after {
      position: absolute;
      display: block;
      top: 0.75px;
      left: -25px;
      width: 0px;
      height: 0px;
      border-right: 25px solid transparent;
      border-bottom: 18px solid #ffba08;
      border-left: 25px solid transparent;
      transform: rotate(-70deg);
      content:'';
}

.christmas-lights, .christmas-lights:before, .christmas-lights:after {
  position: absolute;
  width:5px;
  height: 5px;
  background-color: #ffba08;
  border-radius:50%;
}

.christmas-lights {
  top:-80px;
  left:7px;
  z-index:1;
  box-shadow:5px 2px #ffba08, 10px 4px #ffba08, 15px 6px #ffba08, 20px 8px #ffba08, 25px 10px #ffba08, 30px 12px #ffba08, 35px 14px #ffba08, 40px 16px #ffba08, 45px 18px #ffba08, 50px 20px #ffba08, 55px 22px #ffba08, 60px 24px #ffba08, 65px 26px #ffba08, 70px 28px #ffba08,75px 30px #ffba08, 80px 32px #ffba08, 85px 34px #ffba08, 90px 36px #ffba08;
  animation: light 17s linear infinite;
}

.christmas-lights:before {
  content:"";
  top:55px;
  left:-20px;
  box-shadow:5px 2px #ffba08, 10px 4px #ffba08, 15px 6px #ffba08, 20px 8px #ffba08, 25px 10px #ffba08, 30px 12px #ffba08, 35px 14px #ffba08, 40px 16px #ffba08, 45px 18px #ffba08, 50px 20px #ffba08, 55px 22px #ffba08, 60px 24px #ffba08, 65px 26px #ffba08, 70px 28px #ffba08,75px 30px #ffba08, 80px 32px #ffba08, 85px 34px #ffba08, 90px 36px #ffba08, 95px 38px #ffba08, 100px 40px #ffba08, 105px 42px #ffba08, 110px 44px #ffba08, 115px 46px #ffba08, 120px 48px #ffba08, 125px 50px #ffba08;
}

.christmas-lights:after {
  content:"";
  top:110px;
  left:-28px;
  box-shadow:5px 2px #ffba08, 10px 4px #ffba08, 15px 6px #ffba08, 20px 8px #ffba08, 25px 10px #ffba08, 30px 12px #ffba08, 35px 14px #ffba08, 40px 16px #ffba08;
}

@keyframes light {
  0% {filter: drop-shadow(0 0 8px #fff) brightness(1.2) hue-rotate(0) saturate(7);}
  50% {filter: drop-shadow(0 0 10px #fff) brightness(2) hue-rotate(360deg) saturate(7);}
  100% {filter: drop-shadow(0 0 8px #fff) brightness(1.2) hue-rotate(0) saturate(7);}
}

.balls {
  position: absolute;
  border-radius: 50%;
  height:15px;
  width: 15px;
  background-color: #b62922;
  box-shadow: 40px 30px #003488, 75px -15px #b62922, 45px -40px #b62922, 10px -55px #003488, 30px -95px #b62922, 65px -80px #003488;
  z-index:2;
}

.curtains {
  position: absolute;
  z-index:2;
}

.curtains:before, .curtains:after {
  content:"";
  position: absolute;
  background-color: rgba(0, 33, 55,0.6);
  width: 200px;
  height: 250px;
  top:-15px;
}

.curtains:before {
  border-radius: 0 0 50% 0;
  left:-100px;
}

.curtains:after {
  border-radius: 0 0 0 50%;
  left:200px;
}

Add some snow and bricks:

.snow {
  position: absolute;
  z-index:5;
}

.snow:before, .snow:after {
  content:"";
  position: absolute;
  background-color: white;
  width:30px;
  height:5px;
}

.snow:before {
  top:-120px;
  left:10px;
  border-radius: 0 20px 0 0;
  box-shadow: 230px 105px white;
}

.snow:after {
  border-radius:10px;
  top:-245px;
  left:280px;
  box-shadow: -15px 0 white, -40px 0 white, -85px 0 white, -170px 0 white,-195px 0 white;
}

.bricks {
  position: absolute;
  background-color: #001523;
  width: 80px;
  height: 25px;
  left:100px;
  top:250px;
  box-shadow: 100px 0 #001523, 240px -50px #001523, -240px -100px #001523, -220px -150px #001523, 300px -200px #001523,-150px -300px #001523;
}

and create the snowfall:

.snowflakes, .snowflakes-2, .snowflakes-3, .snowflakes-4, .snowflakes-5 {
  position: absolute;
  border-radius:50%;
  background-color: rgba(255,255,255,0.5);
  width:5px;
  height:5px;
  top:-500px;
  box-shadow: 100px -100px rgba(255,255,255,0.5), -100px -150px rgba(255,255,255,0.5), -200px -100px rgba(255,255,255,0.5), 0 -100px rgba(255,255,255,0.5), 200px -300px rgba(255,255,255,0.5), 100px -350px rgba(255,255,255,0.5), 150px -100px rgba(255,255,255,0.5), 70px -200px rgba(255,255,255,0.5), 300px -100px rgba(255,255,255,0.5), 400px -100px rgba(255,255,255,0.5), 450px -300px rgba(255,255,255,0.5), 500px -300px rgba(255,255,255,0.5), 600px -400px rgba(255,255,255,0.5), 550px -250px rgba(255,255,255,0.5), -200px -300px rgba(255,255,255,0.5), -100px -400px rgba(255,255,255,0.5), 700px -500px rgba(255,255,255,0.5),-400px -500px rgba(255,255,255,0.5), -350px -100px ;
  box-shadow: 100px -100px rgba(255,255,255,0.5), -100px -150px rgba(255,255,255,0.5), -200px -100px rgba(255,255,255,0.5), 0 -100px rgba(255,255,255,0.5), 200px -300px rgba(255,255,255,0.5), 100px -350px rgba(255,255,255,0.5), 150px -100px rgba(255,255,255,0.5), 70px -200px rgba(255,255,255,0.5), 300px -100px rgba(255,255,255,0.5), 400px -100px rgba(255,255,255,0.5), 450px -300px rgba(255,255,255,0.5), 500px -300px rgba(255,255,255,0.5), 600px -400px rgba(255,255,255,0.5), 550px -250px rgba(255,255,255,0.5), -200px -300px rgba(255,255,255,0.5), -100px -400px rgba(255,255,255,0.5), 700px -500px rgba(255,255,255,0.5),-400px -500px rgba(255,255,255,0.5), -350px -100px rgba(255,255,255,0.5), -500px -300px rgba(255,255,255,0.5), 800px -200px rgba(255,255,255,0.5), 750px -250px rgba(255,255,255,0.5), 680px -150px rgba(255,255,255,0.5), 900px -100px rgba(255,255,255,0.5), -700px -300px rgba(255,255,255,0.5),950px -310px rgba(255,255,255,0.5);
}

.snowflakes {
  animation: fall 7s linear infinite
}

@keyframes fall {
  0% {transform: translateY(0);}
  100% {transform: translateY(1000px) translateX(-100px);}
}

.snowflakes-2 {
  left: 100px;
  animation: fall-2 7s linear infinite;
}

@keyframes fall-2 {
  0% {transform: translateY(0);}
  100% {transform: translateY(1000px) translateX(100px);}
}

.snowflakes-3 {
  left:-200px;
  animation: fall-2 7s linear infinite 5s;
}

.snowflakes-4 {
  left:50px;
  animation: fall 7s linear infinite 2s;
}

.snowflakes-5 {
  left:-50px;
  animation: fall 7s linear infinite 4s;
}

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card (Open/ Close on Click)

Pure CSS Snow Globe

CSS Christmas Tree

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

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 Christmas Card

Post author By Lena Stanley
Post date December 23, 2020

Many of us have our own personal traditions when sending out Christmas cards. I always send the wishes to my family and friends, so to make it easier I created the CSS Christmas Card 🙂

If you still did not send the wishes to your loved ones, follow the steps below and create an original Christmas card!

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

Demo:

What do you need to do?

Add HTML
Add CSS
Add CSS Animation
Add jQuery (optional)

Step1.

Add HTML

Create the container, the card, and snowflakes:

<div id="christmascard">
  <div class="card">
    <div class="tree">
      <div class="tree1"></div>
      <div class="balls"></div>
      <div class="balls1"></div>
      <div class="sparkles">✨</div>
      <div class="sparkles1">✨</div>
    </div>
    <div class="wishes">
<!-- You can type your wishes here -->
      <div class="merry">Merry</div>
      <div class="christmas">CHRISTMAS</div>
      <div class="everyone">Everyone</div>
      <div class="lena">Lena xxx</div>
  </div>
    <div class="snowfall">
      <div class="snowflake1">❄</div>
      <div class="snowflake2">❄</div>
      <div class="snowflake3">❄</div>
      <div class="snowflake4">❄</div>
      <div class="snowflake5">❄</div>
      <div class="snowflake6">❄</div>
      <div class="snowflake7">❄</div>
      <div class="snowflake8">❄</div>
      <div class="snowflake9">❄</div>
      <div class="snowflake10">❄</div>
    </div>
</div>
</div>

Step2.

Add CSS

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

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

#christmascard {
  position: relative;  
}

Create the card:

.card {
  z-index:1;
  position: relative;
  width: 500px;
  height: 400px;
  border: 10px solid #fff;
  box-shadow: inset 5px 5px 1px rgba(0,0,0,0.07), 10px 10px 7px rgba(0,0,0,0.3);
  background-color: #c44536;
  overflow:hidden;
  
}

.tree {
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #43291f;
  left: 245px;
  top:120px;
}

.tree:before {
  content:"";
  position: absolute;
  border-bottom: 45px solid #6a994e;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  width:0;
  height:0;
  left:-35px;
  top:-30px;
}

.tree:after {
  content:"";
  position: absolute;
  border-bottom: 45px solid #a7c957;
  border-right: 40px solid transparent;
  top:-30px;
  left:5px;
  width:0;
  height:0;
}

.tree1 {
  position: absolute;
  border-bottom: 40px solid #6a994e;
  border-right: 35px solid transparent;
  border-left: 35px solid transparent;
  width:0;
  height:0;
  left:-30px;
  top:-55px;
}

.tree1:before {
  content:"";
  position: absolute;
  border-bottom: 40px solid #a7c957;
  border-right: 35px solid transparent;
  top:0;
  left:0;
  width:0;
  height:0;
}

.tree1:after {
  content:"";
  position: absolute;
  border-bottom: 30px solid #6a994e;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-15px;
  left:-25px;
  width:0;
  height:0;
}

.balls {
  position: absolute;
  border-bottom: 30px solid #a7c957;
  border-right: 25px solid transparent;
  width:0;
  height:0;
  left:5px;
  top:-70px;
}

.balls:before {
  content:"";
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  top:14px;
  left:2px;
}

.balls:after {
  content:"";
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  top:40px;
  left:-15px;
}

.balls1 {
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  z-index:2;
  left:-10px;
}

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

.balls1:after {
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  content:"";
  left:25px;
  top:-5px;
}

.sparkles {
  position: absolute;
  z-index:2;
  font-size:25px;
  left:-50px;
  top:-5px;
}

.sparkles1 {
  position: absolute;
  z-index:2;
  font-size:23px;
  top:-63px;
  left:18px;
}

Style the wishes (you can type your wishes in the HTML part):

.wishes {
  position: absolute;
  top:200px;
  text-align: center;
  left:140px;
  top:180px;
  color: #fff;
  line-height: 50px;  
}

.merry {
  font-size: 35px;
  font-family: Verdana, sans-serif;
}

.everyone {
  font-size: 35px;
  font-family: Verdana, sans-serif;
}

.christmas {
  font-size: 35px;
  font-family: Verdana, sans-serif;
}

.lena {
  font-family: 'Brush Script MT', cursive;
  font-size: 25px;
}

Step3.

Add CSS Animation

Add some snowflakes to the card:

.snowfall {
  position: absolute;
}

.snowflake1, .snowflake2, .snowflake3, .snowflake4, .snowflake5, .snowflake6, .snowflake7, .snowflake8, .snowflake9, .snowflake10 {
  color: white;
  position: absolute;
}

.snowflake1 {
  font-size:25px;
  left:30px;
  animation: fall 10s linear infinite;
}

.snowflake2 {
  font-size:15px;
  left:30px;
  animation: fall2 6s linear infinite;
}

.snowflake3 {
  font-size:19px;
  left:230px;
  animation: fall3 7s linear infinite;
}

.snowflake4 {
  font-size:24px;
  left:250px;
  animation: fall4 8s linear infinite;
}

.snowflake5 {
  font-size:22px;
  left:333px;
  animation: fall2 6s linear infinite;
}

.snowflake6 {
  font-size:27px;
  left:400px;
  animation: fall 6.5s linear infinite;
}

.snowflake7 {
  font-size:20px;
  left:450px;
  animation: fall5 8.5s linear infinite;
}

.snowflake8 {
  font-size:18px;
  left:170px;
  animation: fall3 7.5s linear infinite;
}

.snowflake9 {
  font-size:29px;
  left:120px;
  animation: fall4 9.5s linear infinite;
}

.snowflake10 {
  font-size:27px;
  left:290px;
  animation: fall5 5s linear infinite;
}

@keyframes fall {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(-10px);}
}

@keyframes fall2 {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(-40px);}
}

@keyframes fall3 {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(50px);}
}

@keyframes fall4 {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(30px);}
}

@keyframes fall5{
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(-40px);}
}

Christmas Card is ready but if you want to add to the card an extra rotation effect follow the step below.

Step4.

Add jQuery

*don’t forget to add the jQuery library in the head section of your HTML file.

$(function(){
    var card = $("#christmascard");
    card.on('mousemove', function (event) {
    var y = event.clientY - $(this).offset().top + $(window).scrollTop();
    var x = event.clientX - $(this).offset().left + $(window).scrollLeft();
            
    var rY = turn(x, 0, $(this).width(), -30, 30);
    var rX = turn(y, 0, $(this).height(), -50, 50);
    
        $(this).children(".card").css("transform", "rotateY(" + rY + "deg)" + " " + "rotateX(" + -rX + "deg)");
    });
        
    function turn(x, in_min, in_max, out_min, out_max)
    {
        return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
    }
});

To see the CSS Christmas Card animation on the website go to lenastanley.com.

Enjoy coding!

Read also:

CSS Snowfall

CSS Christmas Tree Snow Globe

CSS Christmas Tree

Tags #CSSAnimation, #SnowAnimation, Christmas Tree, CSS, JQuery, snowfall

Web development

JS Canvas Snow Animation

Post author By Lena Stanley
Post date December 16, 2020

Demo:

*to see the animation on the website click here.

What do you need to do?

To create the JavaScript Canvas Snow Animation follow the steps below:

Add HTML
Add CSS
Add JavaScript

Step1.

Add HTML

<canvas id="snowfall"></canvas>

Step2.

Add CSS

body {
  background-image: linear-gradient( to top, #fff 5%, #0396FF 100%);
  height: 100vh;
  overflow:hidden;
}

canvas {
  filter: blur(1px);
  opacity:0.7;
  height: 100vh;
}

Step3.

Add JavaScript

var canvas = document.getElementById("snowfall");
var contex = canvas.getContext('2d'),
    
cnsWidth = window.innerWidth,
cnsHeight = window.innerHeight,
numberFlakes = 250,
flakes = [];

function Flake(x, y) {
  var topSize = 4.5, topMotion = 2.5;
  
this.x = x;
this.y = y;
this.spacing = spaceBetween(0, 0.8);
this.distance = spaceBetween(0, Math.PI);
this.weight = spaceBetween(2, topSize);
this.scale = (this.weight / topSize);
this.motion = (this.weight / topSize) * topMotion; 
  
this.update = function() {
this.x += Math.cos(this.distance) * this.spacing;   
this.y += this.motion;
  }  
}

function init() {
  var i = numberFlakes;
        
while (i--) {
    x = spaceBetween(0, cnsWidth, true);
    y = spaceBetween(0, cnsHeight, true);
        
flake = new Flake(x, y);
    flakes.push(flake);
  }
  
scaleCanvas();
  loop();  
}

function scaleCanvas() {
  canvas.width = cnsWidth;
  canvas.height = cnsHeight;
}

function loop() {
  var i = flakes.length;
  
contex.save();
contex.setTransform(1, 0, 0, 1, 0, 0);
contex.clearRect(0, 0, cnsWidth, cnsHeight);
contex.restore();
  
while (i--) {    
    flakeFront = flakes[i];
    flakeFront.update();    
    contex.beginPath();
    contex.arc(flakeFront.x, flakeFront.y, flakeFront.weight, 0, 2 * Math.PI, false);
    contex.fillStyle = "#FFFFFF"; + flakeFront.scale + ')';
    contex.fill();
    
    if (flakeFront.y >= cnsHeight) {
      flakeFront.y = -flakeFront.weight;
    }  
  }  
  requestAnimationFrame(loop);
}

function spaceBetween(min, max, round) {
  var number = Math.random() * (max - min + 1) + min;

  if (round) {
    return Math.floor(number);
  } else {
    return number;
  }
}

init();

Enjoy coding!

Read also:

CSS Snowfall

CSS Christmas Tree Snow Globe

CSS Winter window scene

Tags canvas, JavaScript, 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