
Demo:
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!
Read also: