Categories
CSS Web development

CSS Animation – Party drink

Hello there, thinking about the weekend, I created the new animation using only pure CSS. Follow the tutorial below and create your own CSS drink!

What do you need to do? Follow 3 steps:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
*animation opened in the Safari browser.
To see the live output of the CSS animation click here.

Step 1.

Add HTML

<div class="container">
  <div class="party">
    <div class="circle"></div>
    <div class="drink1"></div>
    <div class="straw1"></div>
    <div class="icecube"></div>
    <div class="icecube1"></div>
    <div class="icecube2"></div>
    <div class="cherry"></div>
    <div class="drink2"></div>
    <div class="prosecco"></div>
    <div class="bubble">
      <div class="bubble1"</div>
      <div class="bubble2"</div>
    </div>
  </div>
   <div class="drink3"></div>
  <div class="pinkdrink"></div>
  <div class="lemon"></div>
</div>
<div class="text"><h1>Party!</h1></div>

Step 2.

Add CSS

Create the background, and set the position of the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #E67E22;
}
.container {
  position: relative;
}
.party {
  position: relative;
}
.circle {
  positon: absolute;
  width:400px;
  height: 400px; 
  border-radius:50%;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow:inset -10px 10px 0 rgba(0,0,0,0.07);
  opacity:0.3;
  z-index:-3;
}
.circle:after {
  content:"";
  width:30px;
  height:30px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.7);
  transform: rotate(35deg);
  top:300px;
  left:-30px;
}
.circle:before {
  content:"";
  width:30px;
  height:30px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.7);
  transform: rotate(35deg);
  left:370px;
  top:30px;
}

Note: I used to create a drink background – CSS gradient. To read more about how to use CSS gradients click here.

Add first drink:

.drink1 {
  position: absolute; 
  width: 80px;
  height:180px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius:2px 2px 10px 10px;
  top:220px;
  left: 150px;
  box-shadow:inset 0px -35px 0 white;
  overflow:hidden;
  z-index:2;
  transform:rotate(20deg);
}
.drink1:after {
  content:"";
  position:absolute;
  background: linear-gradient(0deg, rgba(186,29,29,1) 34%, rgba(218,166,11,1) 65%, rgba(239,255,0,1) 100%);
  box-shadow:inset -10px -1px 0 rgba(0,0,0,0.07);
  width:80px;
  height: 120px;
  top:25px;  
  opacity:0.85;
}
.straw1 {
  position:absolute;
  background-color: black;
  width:8px;
  height:170px;
  top:180px;
  border-radius:20px;
  z-index:1;
  left:220px;
  transform:rotate(30deg);
  box-shadow:inset 2px -2px 0 rgba(255, 255, 255, 0.8);
}
 .icecube {
      width: 30px;
      height: 30px;
      background-color: rgba(255, 255, 255);
      border-radius: 5px;
      position: absolute;
      top: 270px;
      left: 170px;
      z-index:1;
      animation:spin 4s linear infinite;
    }

.icecube1 {
  position:absolute; 
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255);
  border-radius: 5px;
  top:335px;
  left:190px;
  animation:spin 4s linear infinite;
  
}
.icecube2 {
  position:absolute; 
  width: 15px;
  height: 15px;
  background-color: white;
  border-radius: 5px;
  top:300px;
  left:160px;
  animation:spin 4s linear infinite;
}

Style cherry on the top of the glass:

.cherry {
  position:absolute;
  background-color: #A93226;
  border-radius:50%;
  width:35px;
  height:35px;
  box-shadow:inset 5px -5px 0 #B03A2E;
  top:190px;
  left:165px;
  z-index:3;
}
.cherry:after {
  content:"";
  position:absolute;
  background-color: #A93226;
  border-radius:50%;
  width:35px;
  height:35px;
  left:8px;
}
.cherry:before {
  content:"";
  position:absolute;
  width:40px;
	height:40px;
	border-top:4px solid #229954;
	border-right:4px solid #229954;
	border-top-right-radius:100px;
  top:-40px;
  left:-25px;
}

Add the second drink:

.drink2 {
    position: absolute; 
    width: 65px;
    height:140px;
    background-color: rgba(255, 255, 255, 0.5);
    top:170px;
    left:300px;
    border-radius:2px 2px 50px 50px;
    z-index:3;
  transform: rotate(-10deg);
       
  }
.drink2:after {
  content:"";
  width:5px;
  height:75px;
  background-color:white;
  position:absolute;
  top:140px;
  left:30px;
  
}
.drink2:before {
  content:"";
  background-color:white;
  width:40px;
  height:10px;
  position:absolute;
  top:210px;
  left:12px; 
  border-radius:100px 100px 0 0;
  
}

Some bubbles:

.prosecco:after {
  content:"";
  position:absolute;
  background-color:white;
  border-radius:50%;
  width:10px;
  height:10px;
  top:-5px;
  opacity:0.5;
  
}
.prosecco:before {
  content:"";
  position:absolute;
  background-color:white;
  border-radius:50%;
  width:10px;
  height:10px;
  opacity:0.5;
  left:10px;
  
}
.bubble {
  position: absolute;
  z-index:5;
}
.bubble1 {
  position: absolute;
  background-color:white;
  border-radius:50%;
  width:10px;
  height:10px;
  opacity:0.5;
  left:330px;
  top:-200px;
  
}
.bubble1:after {
  content:"";
  position: absolute;
  background-color:white;
  border-radius:50%;
  width:10px;
  height:10px;
  top:50px;
  animation: fade-up 3s ease infinite;
  
}
.bubble1:before {
  content:"";
  position: absolute;
  background-color:white;
  border-radius:50%;
  width:7px;
  height:7px;
  top:50px;
  animation: fade-up 4s ease infinite;
  
}


.bubble2 {
  position:absolute; 
  background-color:white;
  border-radius:50%;
  width:7px;
  height:7px;
  opacity:0.7;
  left:-10px;
  top:5px;
  animation: Up 3s ease infinite;
}
.bubble2:after {
  content:"";
  position: absolute;
  background-color:white;
  border-radius:50%;
  width:5px;
  height:5px;
  top:50px;
  animation: fade-up 3s ease infinite;
}
.bubble2:before {
  content:"";
  position: absolute;
  background-color:white;
  border-radius:50%;
  width:10px;
  height:10px;
  left:0;
  animation: Up 4s ease infinite;
   
}

And add the third drink:

.drink3 {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid rgba(255, 255, 255, 0.5);
  z-index:5;
  left:-15px;
  top:-200px;
  transform:rotate(10deg);
}
.drink3:after {
  content:"";
  width:5px;
  height:75px;
  background-color:white;
  position:absolute;
  left:-2px;
  top:-2px;
  
}
.drink3:before {
  content:"";
  background-color:white;
  width:40px;
  height:10px;
  position:absolute;
  border-radius:100px 100px 0 0;
  top:70px;
  left:-20px;
  
}

.pinkdrink {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  border-top: 80px solid #FF00FF;
  z-index:4;
  left:1.5px;
  top:-180px;
  transform:rotate(10deg);
  
}
.pinkdrink:after {
  content:"";
  position: absolute;
  width:150px;
  height:7px;
  border-radius:100px;
  background-color:rgba(255, 255, 255, 0.7);
  top:-107px;
  left:-75px;
}
.pinkdrink:before {
  content:"";
  position:absolute;
  width:6px;
  height:75px;
  border-radius:100px;
  background-color:rgba(255, 255, 255, 0.7);
  top:-95px;
  transform:rotate(-35deg);
  left:-30px;
  
}
.lemon {
  position: absolute;
  width: 100px;
  height: 50px;
  background-color: yellow;
  border-radius:100px 100px 0 0;
  top:-250px;
  border: 5px solid #F7DC6F;
  left:-45px;
  transform:rotate(-25deg);
  overflow:hidden;
}
.lemon:after {
  content:"";
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 45px solid transparent;
  border-top: 70px solid #F1EB1D;
  position:absolute;
  transform:rotate(65deg);
  left:30px;
  top:20px;
}
.lemon:before {
  content:"";
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 70px solid #F1EB1D;
  position:absolute;
  transform:rotate(-65deg);
  left:-10px;
  top:20px;
}

Style the text:

.text {
  position:absolute;
  top:-40px;
  left:20px;
  transform:rotate(-30deg);
  z-index:14;
}

h1{
font-size: 50px;
text-shadow: 0 0 5px #f5de93, 0 0 15px #f5de93, 0 0 20px #f5de93, 0 0 40px #f5de93, 0 0 60px #decea4, 0 0 10px #d6c0a5, 0 0 98px #ff0000;
color: #1F618D;
font-family: Tahoma, Geneva, sans-serif;
animation: flash 10s infinite;
-webkit-animation: flash 10s infinite;
 
}

Step 3.

Add CSS Animation

For the ice cubes: 

 @keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Prosecco bubbles:

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(-20px);
  }
}
@keyframes Up {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(-30px);
  }
}

To make the text flash: 

 @-webkit-keyframes flash {
  20%, 24%, 55% {
    color: white;
    text-shadow: none;
  }
 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    
  text-shadow: 0 0 5px #f5de93, 0 0 15px #f5de93, 0 0 20px #f5de93, 0 0 40px #f5de93, 0 0 60px #decea4, 0 0 10px #d6c0a5, 0 0 98px #ff0000;
    color:#154360;
  }
}

To see the live output visit: lenastanley.com.

Enjoy coding!