Categories
CSS Web development

Pot of gold coins – CSS Animation

pot of gold

Demo:

*to see the animation on the website click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
  4. 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;
}
CSS St. Patrick's Pot

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;
}
CSS Pot of Gold Animation

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;
}
CSS Pot of Gold

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!