Categories
CSS Web development

I’ts hot outside! /CSS Ice cream

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

Do you like this image? Check more images in the store.
*animation opened in the Safari browser.
To see the live output of the animation click here.

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.

Enjoy coding!

Leave a Reply