Pot of gold coins - CSS Animation

Demo:

*to see the animation on the website click here.

What do you need to do?

Add HTML
Add CSS
Add CSS Animation
Add jQuery

Step 1.

Add HTML

<div class="potOfgold">
  <div class="pot"></div>
  <div class="cloud"></div>
  <div class="coins">
    <div class="coinOne"></div>
    <div class="coinTwo"></div>
    <div class="coinThree"></div>
  </div>
  </div>

Step 2.

Add CSS

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

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

.potOfgold {
  position: relative;
  border-radius:50%;
  width: 350px;
  height: 350px;
  background-color: #90e0ef;
  overflow: hidden;
  z-index:1;
}

.potOfgold:before {
  content:"";
  position: absolute;
  background-color: #55a630;
  width:350px;
  height: 350px;
  border-radius:50%;
  top:250px;
}

.potOfgold:after {
  content:"";
  position: absolute;
  width:80px;
  height:10px;
  background-color: rgba(0,0,0,0.2);
  border-radius:50%;
  top:265px;
  left:135px;
}

Style the pot:

.pot {
  position: relative;
  top:160px;
  left:120px;
  width:110px;
  height: 110px;
  background-color: #333;
  border-radius: 50%;
  z-index:3;
}

.pot:before {
  content:"";
  position: absolute;
  width:100px;
  height: 15px;
  background-color: #333;
  border-radius:10px;
  top:0;
  left:5px;
}

.pot:after {
  content:"";
  position: absolute;
  width: 10px;
  height:20px;
  border-radius:10px;
  background-color: #333;
  top:90px;
  left:20px;
  box-shadow: 60px 0 #333;
}

Add the cloud:

.cloud {
  position: relative;
  background-color: #fff;
  width: 70px;
  height: 35px;
  border-radius: 100px 100px 0 0;
  top:-60px;
  left:140px;
  z-index:2;
  animation: move .4s ease;
}

.cloud:before {
  content:"";
  position: absolute;
  width:50px;
  height: 25px;
  border-radius: 100px 100px 0 0;
  background-color: #fff;
  left:-40px;
  top:10px;
  box-shadow: 100px 0 #fff;
}

.cloud:after { 
  content:"";
  position: absolute;
  opacity:0;
  width:12px;
  height:5px;
  background-color: #ffbe0b;
  top:30px;
  left:5px;
  box-shadow: 12px 0 #8338ec, 24px 0 #ff006e, 36px 0 #3a86ff, 48px 0 #fb5607;
  animation: rainbow 4s ease 2s;
}

Add some coins to the pot:

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

.coinOne, .coinTwo, .coinThree {
  position: absolute;
  width: 10px;
  height: 10px;
  border:5px solid #ffc300;
  border-radius:50%;
  background-color: #ffd60a;
}

.coinOne {
  left:140px;
  top:23px;
  animation: coinbounce .5s ease infinite 3s;
}

.coinTwo {
  left:160px;
  top:20px;
  animation: coinbounce .7s ease infinite 3s;
}

.coinThree {
  left:170px;
  top:40px;
  animation: coinbounce .8s ease infinite 3s;
}

.coinOne:before, .coinOne:after, .coinTwo:before, .coinTwo:after, .coinThree:before, .coinThree:after {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border:5px solid #ffc300;
  border-radius:50%;
  background-color: #ffd60a;
}

.coinOne:before {
  top:10px;
  left:20px;
}

.coinOne:after {
  top:25px;
  left:40px;
}

.coinTwo:before {
  top:15px;
  left:-20px;
}

.coinTwo:after {
  left:20px;
  top:20px;
}

.coinThree:before {
  left:-30px;
  top:10px;
}

.coinThree:after {
  top:5px;
  left:15px;
}

Step 3.

Add CSS Animation

To bounce coins:

@keyframes coinbounce {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-50px); }
        100% { transform: translateY(0); }
    }

To make the cloud move:

@keyframes move {
  0% {transform: translateX(-200px);}
  100% {transform: translateX(0);}
}

And for the rainbow:

@keyframes rainbow {
  0% {height:0;opacity:1;}
  50% {height:150px;opacity:1;}
  100% {height:0;opacity:0;}
}

Step4.

Add jQuery

To read how to add the jQuery code to HTML click here.

setTimeout(function(){
    $(".cloud").animate({
        left: "+=300"
    })
}, 4500, "ease")

To see the live output visit: lenastanley.com.

Enjoy coding!

Share this: