It’s summer, it’s hot and sunny. I love it! Fancy some ice cream?

To see the live output of the animation click here.
What do you need to do?
- Add HTML
- Add CSS
- Add CSS Animation
Step1.
Add HTML
<div class="container">
<div class="icecream">
<div class="ice">
<div class="eyes"></div>
<div class="smile"></div>
</div>
<div class="cone"></div>
<div class="melt"></div>
<div class="drip">
<div class="drip2"></div>
<div class="drip3"></div>
</div>
</div>
<div class="shadow">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
Step2.
Add CSS
Set the colour and the position of the background, and the container:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #F5B7B1;
}
.container {
position: relative;
}
Style the ice cream:
.icecream {
position: absolute;
}
.cone {
position: absolute;
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 200px solid #F7DC6F;
}
.cone:after {
content:"";
position: absolute;
background-color: #F7DC6F;
width: 140px;
height: 25px;
border-radius: 100px;
top:-220px;
left:-70px;
box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
}
.cone:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 30px solid transparent;
border-top: 200px solid rgba(0,0,0,0.07);
top:-200px;
left:15px;
transform: rotate(8deg);
}
.ice {
position:absolute;
border-radius: 50%;
background-color: #5DADE2;
width: 160px;
height: 160px;
box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
top: -150px;
left:-20px;
}
.ice:after {
content:"";
position:absolute;
border-radius: 100px;
background-color: #5DADE2;
width: 175px;
height: 30px;
top: 100px;
left: -5px;
}
Add eyes and the smile:
.eyes {
position: absolute;
border-radius: 50%;
background-color: #000;
width: 20px;
height: 20px;
opacity: 0.5;
top: 40px;
left: 40px;
-webkit-transform-origin: 50%;
-webkit-animation: blink 2s infinite;
}
.eyes:after {
content:"";
position: absolute;
border-radius: 50%;
background-color: #000;
width: 20px;
height: 20px;
top: 0;
left: 40px;
}
.smile {
position: absolute;
top: 70px;
left: 50px;
width: 40px;
height: 20px;
opacity:0.5;
border-radius: 0 0 100px 100px;
overflow: hidden;
background:#000;
}
.smile:after {
content:"";
position: absolute;
top: 8px;
left: 5px;
width: 80%;
height: 70%;
border-radius: 100px 100px 0 0;
background: #5DADE2;
opacity: 0.5;
}
Add the drip:
.melt {
position: absolute;
background-color: #5DADE2;
z-index:1;
width: 20px;
height: 40px;
border-radius: 0 0 30px 30px;
top:-20px;
left:20px;
}
.melt:after {
content:"";
position: absolute;
background-color: #5DADE2;
border-radius: 0 0 30px 30px;
width: 20px;
height: 50px;
left:-30px;
}
.drip {
position: absolute;
left:-10px;
top: 11px;
}
.drip2 {
background-color: #5DADE2;
top: 50px;
position: absolute;
width: 20px;
height: 20px;
border-radius:50%;
animation: down 2s infinite;
}
.drip3 {
top: 173px;
background-color: #5DADE2;
position: absolute;
width: 60px;
height: 20px;
border-radius:50%;
left:-10px;
}
Step3.
Add CSS Animation
For eyes:
@-webkit-keyframes blink {
0%, 100% {
transform: scale(1, .05);
}
5%,
95% {
transform: scale(1, 1);
}
}
For the drip:
@keyframes down {
from {top: 11px;}
to {top: 170px;}
}
To see the live output of the animation go to lenastanley.com.
Watch also the video tutorial:
Enjoy coding!