CSS
body{
background:black;
}
.container{
position:relative;
width:400px;
height:300px;
background:white;
margin:90px auto;
padding-top:90px
}
.cake{
position:relative;
width:212px;
height:192px;
border-radius:30px 30px 0 0;
background:#f9c893;
border:3px solid black;
margin:0 auto;
}
.cake::before{
content:"";
position:absolute;
width:212px;
height:50px;
border-radius:30px 30px 0 0;
border-bottom: 3px solid black;
background:#eaeaea;
margin:0 0;
}
.cake::after{
content:"";
position:absolute;
width:212px;
height:47px;
border-radius:30px 30px 0 0;
background:#25c1f9;
margin:3px 0;
}
.cake3{
position:absolute;
width:212px;
height:37px;
background:#D0378C;
border-top:3px solid black;
margin:152px 0px
}
.cake3::before{
content:"";
position:absolute;
width:212px;
height:3px;
background:#eaeaea;
margin:0px 0px
}
.cake3::after{
content:"";
position:absolute;
width:3px;
height:37px;
background:#eaeaea;
margin:0px 0px
}
.cake7{
position:absolute;
width:17px;
height:50px;
border-radius:0 0 21px 21px;
background:#25c1f9;
border-bottom:3px solid black;
border-right:3px solid black;
border-left:3px solid black;
margin:-145px 121px;
animation:grow 7s linear infinite;
}
.cake9{
position:absolute;
width:17px;
height:90px;
border-radius:0 0 21px 21px;
background:#25c1f9;
border-bottom:3px solid black;
border-right:3px solid black;
border-left:3px solid black;
margin:-145px 153px;
animation:grow3 7s linear infinite;
}
.cake7::after{
content:"";
position:absolute;
width:10px;
height:6px;
border-radius:12px 12px 0 0;
background:#f9c893;
border-top:3px solid black;
border-right:3px solid black;
border-left:3px solid black;
margin:-4px 17px
}
.cherry{
position:absolute;
width:30px;
height:30px;
border-radius:100%;
background:#D0378C;
border:3px solid black;
margin:-37px 90px
}
.cherry::before{
content:"";
position:absolute;
width:21px;
height:25px;
border-radius:100%;
border-right:3px solid black;
transform:rotate(21deg);
margin: -12px 19px
}
.cherry::after{
content:"";
position:absolute;
width:21px;
height:27px;
border-radius:100%;
border-left:3px solid #eaeaea;
margin: 0x 0px
}
@keyframes grow {
0%{height:0px}
50%{height:50px}
}
@keyframes grow3 {
0%{height:0px}
50%{height:90px}
}
