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:
- Add HTML
- Add CSS
- Add CSS Animation
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!