I’ts hot outside! /CSS Ice cream

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

What do you need to do?

1. Add HTML
2. Add CSS
3. 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!