Categories
CSS HTML Web development

CSS Happy New Year Animation (fireworks)

CSS Fireworks

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

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;
}
CSS Clock New Year

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

Categories
CSS JQuery Web development

CSS Champagne Glass 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?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
  4. 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