<div class="glass-wrapper">
<div id="glass" class="glass">
<div class="soda-pop">
<div class="bubble bubble-1"></div>
<div class="bubble bubble-2"></div>
<div class="bubble bubble-3"></div>
<div class="bubble bubble-4"></div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
background: -webkit-radial-gradient(ellipse at 69% 50%, #2d2d39 15%,#1b1920 70%);
background: -o-radial-gradient(ellipse at 69% 50%, #2d2d39 15%,#1b1920 70%);
background: -moz-radial-gradient(ellipse at 69% 50%, #2d2d39 15%,#1b1920 70%);
background-image: radial-gradient(ellipse at 69% 50%, #2d2d39 15%,#1b1920 70%);
}
.glass-wrapper {
perspective: 310px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
height: 180px;
width: 93px;
transform: scale(1.1);
.glass {
border: 4px solid #fafafa;
border-bottom-width: 15px;
border-radius: 4px;
height: 180px;
width: 93px;
transform: rotateX(-32deg);
box-shadow: 0px 3px 96px 11px rgba(255, 255, 255, 0.3), 2px 2px 39px 1px rgba(255, 255, 255, 0.3) inset;
.soda-pop {
background: #a9527a;
border-top: 6px solid #b4648a;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
height: 80%;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-shadow: 0px 2px 29px 13px rgba(169, 82, 122, 0.4);
.bubble {
height: 20px;
width: 20px;
border: 2px solid #fff;
opacity: .4;
border-radius: 50%;
position: absolute;
opacity: 0;
filter: blur(1px);
&.bubble-1 {
left: 20px;
-webkit-animation: bubbles-up 3s infinite;
-moz-animation: bubbles-up 3s infinite;
-o-animation: bubbles-up 3s infinite;
animation: bubbles-up 3s infinite;
animation-timing-function: ease;
}
&.bubble-2 {
left: 17px;
-webkit-animation: bubbles-up 3s infinite;
-moz-animation: bubbles-up 3s infinite;
-o-animation: bubbles-up 3s infinite;
animation: bubbles-up 3s infinite;
animation-timing-function: ease-out;
animation-delay: 1s;
}
&.bubble-3 {
left: 40px;
-webkit-animation: bubbles-up 3s infinite;
-moz-animation: bubbles-up 3s infinite;
-o-animation: bubbles-up 3s infinite;
animation: bubbles-up 3s infinite;
animation-timing-function: ease-in;
animation-delay: 1.8s;
}
&.bubble-4 {
left: 55px;
-webkit-animation: bubbles-up 3s infinite;
-moz-animation: bubbles-up 3s infinite;
-o-animation: bubbles-up 3s infinite;
animation: bubbles-up 3s infinite;
animation-timing-function: linear;
animation-delay: 3s;
}
}
}
}
}
@-webkit-keyframes bubbles-up {
0% {
height: 2px;
width: 2px;
border-width: 1px;
bottom: 15px;
opacity: .6;
}
100% {
height: 20px;
width: 20px;
border-width: 4px;
bottom: 110px;
opacity: 0;
}
}
@-moz-keyframes bubbles-up {
0% {
height: 2px;
width: 2px;
border-width: 1px;
bottom: 15px;
opacity: .6;
}
100% {
height: 20px;
width: 20px;
border-width: 4px;
bottom: 110px;
opacity: 0;
}
}
@-o-keyframes bubbles-up {
0% {
height: 2px;
width: 2px;
border-width: 1px;
bottom: 15px;
opacity: .6;
}
100% {
height: 20px;
width: 20px;
border-width: 4px;
bottom: 110px;
opacity: 0;
}
}
@keyframes bubbles-up {
0% {
height: 2px;
width: 2px;
border-width: 1px;
bottom: 15px;
opacity: .6;
}
100% {
height: 20px;
width: 20px;
border-width: 4px;
bottom: 110px;
opacity: 0;
}
}
View Compiled
This Pen doesn't use any external CSS resources.