CSS Doughnut Animation

Yesterday you could learn how to make a doughnut in Adobe Illustrator, however, if you are not familiar with Illustrator you can create a doughnut on your website using CSS!

We’ll add some movements to the doughnut:

What do you need to do?

You need to have an image of the sweet top of the doughnut in png. format (you can use mine below),

and follow three steps below:

1. Add HTML
2. Add CSS
3. Add CSS Animation

Step 1.

Add HTML

We need to create a container, add doughnut, sweet top, and some sprinkles.

<div class="container">
    <img src="https://lenadesign.org/wp-content/uploads/2020/02/sugar.png?w=640" id="sugar">
   <div class="doughnut"></div> 
   <div class="sprinkle">
   <div class="sprinkle1"></div>
  <div class="sprinkle2"></div>
  <div class="sprinkle3"></div>
  <div class="sprinkle4"></div>
  <div class="sprinkle5"></div>
  <div class="sprinkle6"></div>
  <div class="sprinkle7"></div>
  <div class="sprinkle8"></div>
  <div class="sprinkle9"></div>
  <div class="sprinkle10"></div>
</div>
</div>

Step 2.

Add CSS

Set the colour of the background:

body {
  background-color: #F9E79F;
}

Create a container, add a doughnut and sugar (sweet top):

.container {
  top: 0;
  position: relative;
  left: 40%;
}

.doughnut { 
    position: relative;
    border: 120px solid #D68438;
    border-radius: 50%;
    box-shadow: 5px 5px 1px brown;
    height:150px;
    width:150px;
    z-index: 1;
    top: -350px;
}
#sugar{
  position: relative;
  z-index: 2;
  max-width: auto;
  height: 360px;
  top: 30px;
  left: -50px;
  animation: spin 4s;
}

Note: To the #sugar I added an animation – spin.

Add sprinkles:

.sprinkle {
  position: absolute;
  z-index: 3;
  top: 190px;
  left: 200px;
}
.sprinkle1 {
  height: 45px;
  width: 15px;
  background-color: green;
  border-radius: 500px;
  transform: rotate(-20deg);
  position: absolute;
  top: 80px;
  animation: bounceInDown .5s;
 
}
.sprinkle2 {
  height: 45px;
  width: 15px;
  background-color: yellow;
  border-radius: 500px;
  transform: rotate(-40deg);
  position: absolute;
  top: 35px;
  left: 115px;
  animation: bounceInDown .5s;
  animation-delay: 0.1s;
}
.sprinkle3 {
  height: 45px;
  width: 15px;
  background-color: blue;
  border-radius: 500px;
  transform: rotate(40deg);
  position: absolute;
  top: -15px;
  left: 100px;
  animation: bounceInDown .5s;
  animation-delay: 0.2s;
}
.sprinkle4 {
  height: 45px;
  width: 15px;
  background-color: red;
  border-radius: 500px;
  transform: rotate(90deg);
  position: absolute;
  top: -15px;
  left: -100px;
  animation: bounceInDown .5s;
  animation-delay: 0.3s;
}
.sprinkle5 {
  height: 45px;
  width: 15px;
  background-color: lightblue;
  border-radius: 500px;
  transform: rotate(70deg);
  position: absolute;
  top: 55px;
  left: -110px;
  animation: bounceInDown .5s;
  animation-delay: 0.4s;
}
.sprinkle6 {
  height: 45px;
  width: 15px;
  background-color: orange;
  border-radius: 500px;
  transform: rotate(-30deg);
  position: absolute;
  top: -80px;
  left: -110px;
  animation: bounceInDown .5s;
  animation-delay: 0.5s;
}
.sprinkle7 {
  height: 45px;
  width: 15px;
  background-color: green;
  border-radius: 500px;
  transform: rotate(40deg);
  position: absolute;
  top: -110px;
  left: -40px;
  animation: bounceInDown .5s;
  animation-delay: 0.6s;
}
.sprinkle8 {
  height: 45px;
  width: 15px;
  background-color: lightblue;
  border-radius: 500px;
  transform: rotate(-40deg);
  position: absolute;
  top: -130px;
  left: -5px;
  animation: bounceInDown .5s;
  animation-delay: 0.7s;
}
.sprinkle9 {
  height: 45px;
  width: 15px;
  background-color: red;
  border-radius: 500px;
  transform: rotate(-80deg);
  position: absolute;
  top: -90px;
  left: 55px;
  animation: bounceInDown .5s;
  animation-delay: 0.8s;
}
.sprinkle10 {
  height: 45px;
  width: 15px;
  background-color: orange;
  border-radius: 500px;
  transform: rotate(80deg);
  position: absolute;
  top: 90px;
  left: 55px;
  animation: bounceInDown .5s;
  animation-delay: 0.9s;
}

Note: To each of sprinkle I added an animation – bounceInDown and animation-delay.

Step 3.

Add CSS Animation

To make sweet top spin:

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

To make sparkles bounceInDown:

@keyframes bounceInDown {
   0% {
      opacity: 0;
      transform: translateY(-1000px);
   }
   60% {
      opacity: 1;
      transform: translateY(10px);
   }
   80% {
      transform: translateY(10px);
   }
   100% {
      transform: translateY(0);
   }
} 

To see the live output visit lenastanley.com (in the modified version to the blogger post).

Enjoy coding!