NewYear Archives - Lena Design

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

Demo:

*to see the CSS Happy New Year Animation (fireworks) on the website click here.

Step1.

Add HTML

<div class="happy-new-year">
  <div class="circle">
    <div class="clock-bottom"></div>
  </div>
  <div class="clock-middle">
    <div class="clock-face"></div>
  </div>
  <div class="clock-top">
    <div class="roof"></div>
    <div class="deco"></div>
    <div class="sides"></div>
  </div>
  <div class="clouds"></div>
  <div class="fireworks">
    <div class="one"></div>
  </div>
    <div class="fireworks-2">
    <div class="two"></div>
    </div>
      <div class="fireworks-3">
    <div class="two"></div>
      </div>
   <div class="fireworks-4">
    <div class="one"></div>
      </div>
  <div class="text">Happy 2022!</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: #1d3557;
  overflow: hidden;
}

.happy-new-year {
  position: relative;
}

Add the circle and clouds (background):

.circle {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #000814;
}

.clouds {
  position: absolute;
  top:0;
  left:0;
}

.clouds:before, .clouds:after {
  content:"";
  position: absolute;
  background-color: #001d3d;
}

.clouds:before {
  width: 100px;
  height: 40px;
  border-radius: 30px;
  top:130px;
  left:-40px;
  box-shadow: 275px 40px #001d3d;
}

.clouds:after {
  width:50px;
  height: 50px;
  left:-10px;
  top:110px;
  border-radius:50%;
  box-shadow: 270px 40px #001d3d;
}

Style the clock:

.clock-bottom {
  position: absolute;
  width: 100px;
  height:100px;
  background-color: #dd904a;
  top:240px;
  left:95px;
  border: 5px solid #333;
}

.clock-bottom:before {
  content:"";
  position: absolute;
  background-color: #333;
  width: 20px;
  height:100px;
  border-radius:30px;
  top:10px;
  left:10px;
  box-shadow: 30px 0 #333, 60px 0 #333;
}

.clock-bottom:after {
  content:"";
  position: absolute;
  background-color: #9c5221;
  width:12px;
  height:100px;
  border-radius: 30px;
  left:14px;
  top:14px;
  box-shadow: 30px 0 #9c5221, 60px 0 #9c5221;
}

.clock-middle {
  position: absolute;
  width:100px;
  height:100px;
  background-color: #dc8f4a;
  border: 5px solid #333;
  top:135px;
  left:95px;
  z-index:1;
}

.clock-middle:before {
  content:"";
  position: absolute;
  border: 5px solid #333;
  width:80px;
  height:80px;
  top:5px;
  left:5px;
}

.clock-middle:after {
  content:"";
  position: absolute;
  border-radius:50%;
  border: 5px solid #333;
  height:75px;
  width: 75px;
  top:7px;
  left:7px;
  background-color: #f9fcc5;
}
.clock-top {
  position: absolute;
  width:100px;
  height:20px;
  border: 5px solid #333;
  background-color: #d88e4a;
  top:110px;
  left:95px;
}

.clock-top:before {
  content:"";
  position: absolute;
  width:71px;
  height:0;
  border-top: 30px solid transparent;
  border-bottom: 50px solid #333;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  top:-80px;
  left:-5px;  
}

.clock-top:after {
  position: absolute;
  content:"";
  border: 5px solid #333;
  background-color: #d88e4a;
  width:63px;
  height:25px;
  top:-80px;
  left:14px;
}

.roof {
  position: absolute;
  height:0;
  width:0;
  border-bottom: 100px solid #333;
  border-right: 35px solid transparent;
  border-left: 35px solid transparent;
  top:-175px;
  left:15px;
}

.roof:before, .roof:after {
  content:"";
  background-color: #333;
  position: absolute;
}

.roof:before {
  width:2px;
  height:20px;
  left:-54px;
  top:150px;
  box-shadow: 106px 0 #333, 18px -75px #333, 88px -75px #333;
}

.roof:after {
  border-radius:50%;
  width:5px;
  height: 5px;
  left:-55.5px;
  top:145px;
  box-shadow: 106.5px 0 #333, 18px -75px #333, 88px -75px #333;
}

.deco {
  position: absolute;
  background-color: #965123;
  width: 10px;
  height: 10px;
  top:5px;
  left:7px;
  box-shadow: 15px 0 #965123, 30px 0 #965123, 45px 0 #965123, 60px 0 #965123, 75px 0 #965123;
  z-index:3;
}

.deco:before {
  content:"";
  position: absolute;
  background-color: #965123;
  width:10px;
  height: 13px;
  top:-75px;
  left:15px;
  box-shadow: 15px 0 #965123, 30px 0 #965123, 45px 0 #965123;
}

.sides {
  position: absolute;
  background-color: #333;
  width:30px;
  height: 100px;
  left:-30px;
  top:25px;
  box-shadow:130px 0 #333;
}

.sides:before {
  content:"";
  position: absolute;
  width:20px;
  height: 90px;
  background-color: #dc904c;
  left: 5px;
  top:5px;
  box-shadow:130px 0 #dc904c;
}

Style and animate the clock face:

.clock-face {
  position: absolute;
  background-color: #333;
  border-radius:50%;
  width:15px;
  height:15px;
  left: 50%;
  top: 50%;
  z-index:2;
  transform: translate(-50%, -50%);
}

.clock-face:before, .clock-face:after {
  content:"";
  position: absolute;
  background-color: #333;
  border-radius:30px;
  transform-origin: right;
}

.clock-face:before {
  width:30px;
  height: 5px;
  top:5px;
  left:-23px;
  transform: rotate(-50deg);
  animation: rotate 3s linear forwards;
 
}

@keyframes rotate {
  from {transform: rotate(-50deg);}
  to {transform: rotate(450deg);}
}

.clock-face:after {
  content:"";
  position: absolute;
  width: 25px;
  height:5px;
  top:5px;
  left:-18px;
  animation: rotateTwo 3s linear forwards;
}

@keyframes rotateTwo {
  from {transform: rotate(0deg);}
  to {transform: rotate(90deg);}
}

Add fireworks:

.fireworks, .fireworks-2, .fireworks-3, .fireworks-4 {
  position: absolute;
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

.fireworks {
  top:-60px;
  left:-70px;
}

.fireworks-4 {
  left: 330px;
  top:170px;
  transform: scale(1.3);
}

.fireworks-3 {
  top:-100px;
  left:250px;
  transform: scale(0.7);
}

.fireworks-2 {
  top:50px;
  left:-150px;
  transform: scale(1.2);
}

.one, .one:before, .one:after, .two, .two:before, .two:after{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left:50%;
  top:50%;
  opacity:0;
  transform: translate(-50%,-50%);
}

.one {
  border: 5px dotted #ffd166;
  animation: show 1.2s ease infinite 3s;
}

.two {
  border: 5px dotted #118ab2;
  animation: show 1.2s ease infinite 3.2s;
}

@keyframes show {
  0%, 100% {height:10px;width:10px;opacity:0;}
  50% {height:100px; width: 100px;opacity:1;}
}

.one:before {
  content:"";
  border: 5px dotted #ef476f;
  animation: show-2 1.2s ease infinite 3.2s;
}

.two:before {
  content:"";
  border: 5px dotted #ffd166;
  animation: show-2 1.2s ease infinite 3.4s;
}

.one:after {
  content:"";
  border: 5px dotted #118ab2;
  animation: show-3 1.2s ease infinite 3.4s;
}

.two:after {
  content:"";
  border: 5px dotted #ef476f;
  animation: show-3 1.2s ease infinite 3.6s;
}

@keyframes show-2 {
  0%, 100% {height:10px;width:10px;opacity:0;}
  50% {height:130px; width: 130px;opacity:1;}
}

@keyframes show-3 {
  0%, 100% {height:10px;width:10px;opacity:0;}
  50% {height:160px; width: 160px;opacity:1;}
}

Style and animate the text:

.text {
  width: 300px;
  text-align: center;
  color: white;
  font-size: 40px;
  position: absolute;
  top:305px;
  z-index:10;
  font-family: tahoma;
  left:0;
  opacity:0;
  white-space: nowrap;
  animation: text 4s ease forwards 4s;
}

@keyframes text {
  0% {opacity:0;}
  100% {opacity:1;}
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Champagne Glass Animation

CSS Party drinks

CSS Birthday Animation

toast — Do you like this image? Check more images in the store.

To learn how to create the CSS Champagne Glass animation follow the steps below and watch the video tutorial.

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

Demo:

What do you need to do?

Add HTML
Add CSS
Add CSS Animation
Add jQuery

Step1.

Add HTML

<div class="newyear">
  <div class="glass1">
  <div class="glass">
     <div class="holder"></div>
    </div>
    <div class="drink">
      <div class="liquid"></div>
      <div id="bubbles">
  <div id="bubble" class="bubble1"></div>
  <div id="bubble" class="bubble2"></div>
  <div id="bubble" class="bubble3"></div>
  <div id="bubble" class="bubble4"></div>
    </div>
      </div>
    <div class="champagne"></div>
  </div>
  <div class="line"></div>
  <div class="text">Happy New Year!</div>
  <div class="number">2021</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: #fae1df;
  height: 80vh;  
}

.newyear {
  position: relative; 
}

.glass1 {
  position: absolute;
  animation: drop 2s linear;
}

Style the glass:


.glass {
  position: absolute;
  width: 50px;
  height: 110px;
  border: 5px solid #333;
  border-radius:0 0 50px 50px;
  box-shadow: inset 0 -5px 0 rgba(255,255,255,0.4);
  top:-10px;
  z-index:30;
  animation: drop 2s linear;
}
.glass:before {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  width:7px;
  height:70px;
  left:7px;
  top:15px;
  border-radius:10px;
}

.holder {
  position: absolute;
  width:5px;
  height:70px;
  background-color: #333;
  top:115px;
  left:24px;
}

.holder:before {
  content:"";
  position: absolute;
  width:50px;
  height:10px;
  background-color: #333;
  top:70px;
  left:-22px;
  border-radius:30px 30px 0 0;
}

Fill the glass:

.drink {
  position: absolute;
  overflow: hidden; 
  width: 48px;
  height: 180px;
  border-radius:0 0 50px 50px;
  top:-78px;
  left:6px;

}

.liquid {
  position: absolute;
  background-color: #fdc500;
  width:80px;
  height:50px;
  left:-5px;
  top: 210px;  
}

.champagne {
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: #fdc500;
  top:-350px;
  left: 20px;
  z-index:5;
  animation: champagne 3s linear;
  animation-delay: 2s;
}

Add some bubbles:

#bubbles {
  position: absolute;
  top:50px;
  
}

#bubble {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #F3F1E7;
  border-radius: 50%;
  opacity: 0;
  top: 100px;
  left: 10px;
  z-index:10;
  
}
.bubble1 {
  animation: bubble1 1.2s ease-out 5s infinite; 
}
.bubble3 {
  animation: bubble1 1s ease-out 4.2s infinite; 
}
.bubble2 {
  animation: bubble2 1.2s ease-out 4.7s infinite; 
}
.bubble4 {
  animation: bubble2 1.3s ease-out 3.7s infinite; 
}

Add the wishes to the animation:

.line {
  position: absolute;
  background-color: #333;
  height:5px;
  width:250px;
  top:190px;
  left:-97px;
}
.text {
  position: absolute;
  top:200px;
  left:-93px;
  display: inline-block;
  white-space: nowrap;
  font-family: 'Brush Script MT', cursive;
  font-size:40px;  
}

.number {
  position: absolute;
  top:240px;
  left:-10px;
  font-family: 'Brush Script MT', cursive;
  font-size:40px;  
}

Step3.

Add CSS Animation

Drop the glass down:

@keyframes drop {
  0% {transform: translateY(-470px); opacity: 0;}
  5% {opacity: 1;}
  50% {transform: translateY(0px); opacity: 1;}
  65% {transform: translateY(-15px); opacity: 1;}
  75% {transform: translateY(-18px); opacity: 1;}
  100% {transform: translateY(0px); opacity: 1;}
}

To pour the champagne:

@keyframes champagne {
  0% {height: 0px; opacity: 1; transform: scaleX(1);}
  10% {height: 0px; opacity: 1; transform: scaleX(0.95);}
  30% {height:450px;opacity: 1; transform: scaleX(0.9);}
  80% {height: 450px; opacity: 1; transform: scaleX(0.85);}
  100% {height: 450px; opacity: 0; transform: scaleX(0.8);}
}

Move the bubbles:

@keyframes bubble1{
  0%{
    transform: translateY(0) translateX(0) scale(0.3);
    opacity: 1;
  }
  100%{
    transform: translateY(-95px) translateX(10px) scale(0.5);
    opacity: 0.5;
  }
}
@keyframes bubble2{
  0%{
    transform: translateY(0) translateX(0) scale(0.4);
    opacity: 1;
  }
  100%{
    transform: translateY(-105px) translateX(-10px) scale(0.6);
    opacity: 0.6;
  }
}

Step4.

Add jQuery

setTimeout(function(){
    $(".liquid").animate({
        "height": "+=40",
        top: "-=100"
    }, 2000)
}, 2000, "ease")

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Snowfall

Birthday Cake – CSS Animation

CSS Party drinks