Some time ago I posted the tutorial CSS Doughnut Animation where I used the only CSS to create it. Today, I created similar Doughnut, but to animate βbitesβ I used jQuery.
The doughnut has been bitten π
To see the live output of the animation click here.
What do you need to do?
- Add HTML
- Add CSS
- Add jQuery/JS
Step1.
Add HTML
Draw your Doughnut:
<div class="container">
<div class="content">
<div class="doughnut"></div>
<div class="sugar"></div>
<div class="sugar1"></div>
<div class="right"></div>
<div class="sprinkles">
<div class="sprinkle1"></div>
<div class="sprinkle2"></div>
<div class="sprinkle3"></div>
</div>
<div class="bite">
<div class="bite1"></div>
<div class="bite2"></div>
<div class="bite3"></div>
<div class="bite4"></div>
<div class="bite5"></div>
<div class="bite6"></div>
<div class="bite7"></div>
</div>
<div class="crumbs">
<div class="crumb1"></div>
<div class="crumb2"></div>
</div>
<div class="shadow"></div>
</div>
</div>
Step2.
Add CSS
Set the position and the color of the background, the container, and the content:
body {
background-color: #720026;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
position: relative;
top:-50px;
}
.content {
position: relative;
}
Style the doughnut:
.doughnut {
position: relative;
border: 120px solid #FF9B54;
border-radius: 50%;
box-shadow: inset 5px 5px 1px #FF7F51, 5px 5px 1px #FF7F51;
height:150px;
width:150px;
}
.doughnut:after {
content:"";
position: absolute;
height: 170px;
width: 170px;
border-top:100px solid #CE4257;
border-right:100px solid #CE4257;
border-left:100px solid #CE4257;
border-bottom: 100px solid transparent;
border-radius:50%;
top:-115px;
left:-110px;
z-index:1;
}
.doughnut:before {
content:"";
position: absolute;
width:115px;
height:110px;
background-color: #FF9B54;
left:-90px;
top:100px;
z-index:2;
transform: skew(23deg);
}
.sugar {
position: absolute;
background-color: #CE4257;
width: 40px;
height: 50px;
border-radius:100px;
top:190px;
z-index:3;
left:74px;
transform: skew(15deg);
box-shadow: 0 5px 0 rgba(255, 255, 255, 0.3);
}
.sugar:after {
content:"";
position: absolute;
background-color: #FF9B54;
width: 40px;
height: 50px;
border-radius:100px;
left:-40px;
box-shadow:inset 0 5px 0 rgba(255, 255, 255, 0.3);
}
.sugar:before {
content:"";
position:absolute;
background-color: #CE4257;
width:23px;
height:35px;
top:15px;
left:-63px;
border-radius:100px;
transform: skew(-5deg);
box-shadow: 0 5px 0 rgba(255, 255, 255, 0.3);
}
.sugar1 {
position: absolute;
width:120px;
height:80px;
background-color: #FF9B54;
left:230px;
top:258px;
z-index:2;
transform: skew(-30deg);
}
.sugar1:after {
content:"";
position: absolute;
width:40px;
height:40px;
background-color: #CE4257;
border-radius:100px;
top:-25px;
left:-2px;
transform: skew(10deg);
box-shadow:0 5px 0 rgba(255, 255, 255, 0.3);
}
.sugar1:before {
content:"";
position: absolute;
width:40px;
height:40px;
background-color: #FF9B54;
z-index:3;
border-radius:100px;
left:39px;
top:-20px;
box-shadow:inset 0 5px 0 rgba(255, 255, 255, 0.3);
}
.right {
position: absolute;
background-color: #CE4257;
width:36px;
height:40px;
left:331px;
top:238px;
z-index:4;
border-radius:100px;
transform: skew(-25deg);
box-shadow:0px 5px 0 rgba(255, 255, 255, 0.3);
}
Add some sprinkles:
.sprinkles {
position: absolute;
z-index:5;
}
.sprinkle1 {
position: absolute;
border-radius:100px;
height: 30px;
width: 10px;
background-color: #FEE440;
box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
top:-260px;
left:50px;
transform: rotate(20deg);
}
.sprinkle1:after {
content:"";
position: absolute;
border-radius:100px;
height: 30px;
width: 10px;
background-color: #F15BB5;
box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
top:-60px;
left:50px;
transform: rotate(20deg);
}
.sprinkle1:before {
content:"";
position: absolute;
border-radius:100px;
height: 30px;
width: 10px;
background-color: #00BBF9;
box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
top:-110px;
left:100px;
transform: rotate(-60deg);
}
.sprinkle2 {
position: absolute;
border-radius:100px;
height: 30px;
width: 10px;
background-color: #00F5D4;
box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
top:-260px;
left:340px;
transform: rotate(70deg);
}
.sprinkle2:after {
content:"";
position: absolute;
border-radius:100px;
height: 30px;
width: 10px;
background-color: #00F5D4;
box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
top:200px;
left:-160px;
transform: rotate(30deg);
}
.sprinkle2:before {
content:"";
position: absolute;
border-radius:100px;
height: 30px;
width: 10px;
background-color: #9B5DE5;
box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
top:100px;
left:-160px;
transform: rotate(30deg);
}
.sprinkle3 {
position: absolute;
border-radius:100px;
height: 30px;
width: 10px;
background-color: #FEE440;
box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
top:-210px;
left:300px;
transform: rotate(-40deg);
}
.sprinkle3:before {
content:"";
position: absolute;
border-radius:100px;
height: 30px;
width: 10px;
background-color: #9B5DE5;
box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
top:-90px;
left:30px;
transform: rotate(30deg);
}
.sprinkle3:after {
content:"";
position: absolute;
border-radius:100px;
height: 30px;
width: 10px;
background-color: #F15BB5;
box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
top:-120px;
left:60px;
transform: rotate(-180deg);
}
Shadow and crumbs:
.crumbs {
position: absolute;
}
.crumb1 {
position: absolute;
background-color: #FF9B54;
border-radius:50%;
box-shadow: inset 5px 5px 0 #FF7F51;
width:30px;
height:30px;
}
.crumb1:after {
content:"";
position: absolute;
background-color: #FF9B54;
border-radius:50%;
box-shadow: inset 5px 5px 0 #FF7F51;
width:20px;
height:20px;
left:-30px;
top:-30px;
}
.crumb1:before {
content:"";
position: absolute;
background-color: #FF9B54;
border-radius:50%;
box-shadow: inset 5px 5px 0 #FF7F51;
width:10px;
height:10px;
left:-50px;
top:10px;
}
.crumb2 {
position: absolute;
background-color: #FF9B54;
border-radius:50%;
box-shadow: inset -5px -5px 0 #FF7F51;
width:30px;
height:30px;
top:-20px;
left:350px;
}
.crumb2:after {
content:"";
position: absolute;
background-color: #FF9B54;
border-radius:50%;
box-shadow: inset -5px -5px 0 #FF7F51;
width:20px;
height:20px;
left:-40px;
top:40px;
}
.crumb2:before {
content:"";
position: absolute;
background-color: #FF9B54;
border-radius:50%;
box-shadow: inset -5px -5px 0 #FF7F51;
width:10px;
height:10px;
left:60px;
top:30px;
}
.shadow {
position: absolute;
width:500px;
height:100px;
background-color: rgba(0,0,0,0.07);
border-radius:50%;
left:-50px;
top:350px;
z-index:-2;
}
Create the bites:
.bite {
position: absolute;
z-index:100;
}
.bite1 {
position: absolute;
background-color: #720026;
width:100px;
height:100px;
border-radius:50%;
left:250px;
top:-380px;
}
.bite1:after {
content:"";
position:absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
top:40px;
left:60px;
}
.bite1:before {
content:"";
position:absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
top:-40px;
left:-30px;
}
.bite2 {
position: absolute;
background-color: #720026;
width:100px;
height:100px;
border-radius:50%;
top:-400px;
left:90px;
}
.bite2:after {
content:"";
position: absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
left:65px;
top:0;
}
.bite2:before {
content:"";
position: absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
left:-65px;
top:0;
}
.bite3 {
position: absolute;
background-color: #720026;
width:100px;
height:100px;
border-radius:50%;
left:310px;
top:-220px;
}
.bite3:after {
content:"";
position: absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
left:15px;
top:-50px;
}
.bite3:before {
content:"";
position: absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
left:15px;
top:60px;
}
.bite4 {
position: absolute;
background-color: #720026;
width:100px;
height:100px;
border-radius:50%;
left:210px;
top:-320px;
}
.bite4:after {
content:"";
position: absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
left:55px;
top:35px;
}
.bite4:before {
content:"";
position: absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
left:-35px;
top:-35px;
}
.bite5 {
position: absolute;
background-color: #720026;
width:100px;
height:100px;
border-radius:50%;
left:50px;
top:-330px;
}
.bite5:before {
content:"";
position: absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
left:75px;
top:5px;
}
.bite5:after {
content:"";
position: absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
left:-70px;
top:0px;
}
.bite6 {
position: absolute;
background-color: #720026;
width:100px;
height:100px;
border-radius:50%;
left:-10px;
top:-220px;
}
.bite6:after {
content:"";
position:absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
top:50px;
left:10px;
}
.bite6:before {
content:"";
position:absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
top:-40px;
left:0;
}
.bite7 {
position: absolute;
background-color: #720026;
width:100px;
height:100px;
border-radius:50%;
left:50px;
top:-220px;
}
.bite7:after {
content:"";
position:absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
top:50px;
left:30px;
}
.bite7:before {
content:"";
position:absolute;
background-color: #720026;
width:90px;
height:90px;
border-radius:50%;
top:-40px;
left:15px;
}
Step3.
Add jQuery /JS
(function($){
var el = $('.bite1, .bite2, .bite3, .bite4, .bite5, .bite6, .bite7');
var animationLength = 400;
var duration = el.length * animationLength + animationLength;
var clearAfter = 100;
var animation;
function fadeNext(collection){
collection.eq(0).fadeIn(animationLength, function(){
(collection=collection.slice(1)).length
&& fadeNext(collection)
});
}
function play(){
fadeNext(el);
animation = setTimeout(function(){
el.hide();
play();
}, duration);
}
play();
setTimeout(function(){
clearTimeout(animation);
}, duration * clearAfter);
})(jQuery)
To see the live output of the animation go to lenastanley.com.
Enjoy coding!