Categories
CSS Web development

Pot of gold coins – CSS Animation

Have you heard the story about the Pot of Gold at the end of the rainbow? For sure – yes! So now..tell the truth ๐Ÿ˜‰ did you try as a kid to find this pot?

Pot of gold
Do you like this image? Check more vector images in theย store.

Unfortunately..I’ve never found it, but I created one in CSS! Follow the steps below, and create your own Pot of Gold!

What do you need to do? You need to have an image of the clover in .png format (if you don’t have, don’t worry use mine below), and:

Clover
clover.png
  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Note: To create CSS Pot of Gold Animation I used a few types of CSS animations like- spin (for a clover), swing (for a pot), and bounce (for coins, and the shadow).

*animation opened in the Safari browser.
To see the live output of the animation click here.

Step 1.

Add HTML

<div class= "container">
  <div class="pot">
  <div class="pottop"></div>
       <div class="potbottom"></div>
  <div class="clover">
    <img src=https://lenadesign.org/wp-content/uploads/2020/03/clover.png?w=640 alt="clover">
  </div>
  </div>
  <div class="coins">
    <div class="coin1"></div>
     <div class="coin2"></div>
      <div class="coin3"></div>
       <div class="coin4"></div>
    <div class="coin5"></div>
     <div class="coin6"></div>
  </div>
    <div class="shadow"></div>
  </div>

Step 2.

Add CSS

Set the colour of the background, and objects position.

body{
  background: #57c215;
  background-image: radial-gradient(#8bd160, #79c24c, #57c215);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
St. Patrick's Day

Create the container, pot and style your image.

.container {
  position: relative; 
  margin: 0;
  padding: 0;
  }

  .pot{
    position: relative;
    animation: swing ease-in-out 1s infinite alternate;
  }
.pottop {
  position: absolute;
  background-color: #2a570e;
  width: 300px;
  height: 40px;
  border: 1px solid #2a570e;
  border-radius: 30px 30px 30px 30px;
    
}
.potbottom {
  background-color: #2a570e;
  width: 200px;
  height: 200px;
  position: absolute;
  border-radius: 0 0 80px 80px;
  left: 50px;
}
.clover img {
  position: absolute;
  width:240px; 
  height:200px;
  left: 35px;
  animation: spin 8s linear infinite;
  
} 

Note: Add to the pot (swing) and the clover (spin) the animation.

St. Patrick's Day CSS Animation

Add shadow:

.shadow {
  position: absolute;
  width: 200px;
  height: 40px;
  top: 200px;
  left: 50px;
  border-radius: 50%;
  background-color: black;
  z-index:-1;
  filter: blur(1px);
  opacity: 0.5;
  animation: bounceshadow alternate infinite 400ms 40ms ease-in-out;
  
Pot of Gold Coins

Note: Add to the shadow an animation – bounce ease-in-out.

Add some coins to the pot:

.coins {
  position: absolute;
}
  .coin1 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  animation: coinbounce 2s alternate infinite ;
  z-index: -1;
  left: 45px;
}
.coin2 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  animation: coinbounce1 1.5s alternate infinite ;
  z-index: -1;
  left: 85px;  
}
.coin3 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  animation: coinbounce1 2.5s alternate infinite ;
  z-index: -1;
  left: 185px;
}
.coin4 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  animation: coinbounce 1.5s alternate infinite ;
  z-index: -1;
  left: 155px;
}
.coin5 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  animation: coinbounce 1.3s alternate infinite ;
  z-index: -1;
  left: 115px;
}
.coin6 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  z-index: -1;
  left: 115px;
}
.coin6:after {
  position: absolute;
  content:"";
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  z-index: -1;
  left: 115px;
}
.coin6:before {
  position: absolute;
  content:"";
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  z-index: -1;
  left: 70px;
}
  

Step 3.

Add CSS Animation

Coins – bounce animation:

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

Pot – swing:

@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}

Clover – spin:

@keyframes spin {
   from{ 
   }
   to{
      transform:rotate(360deg);
   }
}

Shadow: bounce ease-in-out:

@keyframes bounceshadow { 
  to { transform: scaleX(1.03) scaleY(0.97); } 
}

To see the live output visit: lenastanley.com.

Enjoy coding!

Leave a Reply