Sloshing Beaker

Developer
Mark Thomes
Size
7,223 Kb
Views
46,552
  1. Sloshing Beaker Previews
  2. Sloshing Beaker HTML Codes
  3. Sloshing Beaker CSS Codes

How do I make an sloshing beaker?

Animated css beaker using clip-path and animation keyframes.. What is a sloshing beaker? How do you make a sloshing beaker? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.

Sloshing Beaker Previews
IQ Test

Sloshing Beaker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sloshing Beaker</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/7534eb3fb62294822de9eace9.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="beaker"> <div class="water color"> <ul class="bubbles"> <li></li> <li></li> <li></li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/footer-inject.js'></script>
</body>
</html>

Sloshing Beaker - Script Codes CSS Codes

body { background-color: #333;
}
.beaker { position: absolute; top: 50%; left: 50%; margin-top: -165px; margin-left: -40px; width: 80px; height: 330px; background-color: #d2db88; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; -webkit-animation: rotate 1s ease-in-out alternate infinite -1s; animation: rotate 1s ease-in-out alternate infinite -1s; -webkit-transform: rotate(0); transform: rotate(0);
}
.beaker:before { content: ''; width: 100px; height: 20px; background-color: #d2db88; position: absolute; top: -22.4px; left: -10px; border-radius: 20px; z-index: 10;
}
.beaker:after { position: absolute; content: ''; width: 80px; height: 10px; border-radius: 100%; background-color: rgba(0, 0, 0, 0.25); bottom: -40px; -webkit-animation: rotate-shadow 1s ease-in-out alternate infinite -1s; animation: rotate-shadow 1s ease-in-out alternate infinite -1s;
}
.water { background-color: #b3c33a; width: 72px; height: 322px; position: absolute; bottom: 4px; left: 4px; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; -webkit-clip-path: polygon(0% 20%, 100% 20%, 100% 100%, 0% 100%); clip-path: polygon(0% 20%, 100% 20%, 100% 100%, 0% 100%); -webkit-animation: slosh 1s ease-in-out alternate infinite -0.8s; animation: slosh 1s ease-in-out alternate infinite -0.8s;
}
.bubbles { list-style-type: none; margin: 0; padding: 0;
}
.bubbles > li { position: absolute; width: 10px; height: 10px; border-radius: 50%; bottom: 36px; left: 50%; margin-left: -5px; background-color: #c3d060; -webkit-animation: bubble1 5s ease-in-out forwards infinite; animation: bubble1 5s ease-in-out forwards infinite;
}
.bubbles > li:nth-child(1) { -webkit-animation: bubble1 5s ease-in-out forwards infinite -5s; animation: bubble1 5s ease-in-out forwards infinite -5s;
}
.bubbles > li:nth-child(2) { -webkit-animation: bubble2 5s ease-in-out forwards infinite -7.5s; animation: bubble2 5s ease-in-out forwards infinite -7.5s;
}
.bubbles > li:nth-child(3) { -webkit-animation: bubble3 5s ease-in-out forwards infinite -6.25s; animation: bubble3 5s ease-in-out forwards infinite -6.25s;
}
@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
}
@keyframes rotate { 0% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
}
@-webkit-keyframes rotate-shadow { 0% { -webkit-transform: translate(-20px, -4px) rotate(10deg); transform: translate(-20px, -4px) rotate(10deg); } 100% { -webkit-transform: translate(20px, -4px) rotate(-10deg); transform: translate(20px, -4px) rotate(-10deg); }
}
@keyframes rotate-shadow { 0% { -webkit-transform: translate(-20px, -4px) rotate(10deg); transform: translate(-20px, -4px) rotate(10deg); } 100% { -webkit-transform: translate(20px, -4px) rotate(-10deg); transform: translate(20px, -4px) rotate(-10deg); }
}
@-webkit-keyframes slosh { 0% { -webkit-clip-path: polygon(0% 16.5%, 100% 20%, 100% 100%, 0% 100%); clip-path: polygon(0% 16.5%, 100% 20%, 100% 100%, 0% 100%); -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); } 100% { -webkit-clip-path: polygon(0% 20%, 100% 16.5%, 100% 100%, 0% 100%); clip-path: polygon(0% 20%, 100% 16.5%, 100% 100%, 0% 100%); }
}
@keyframes slosh { 0% { -webkit-clip-path: polygon(0% 16.5%, 100% 20%, 100% 100%, 0% 100%); clip-path: polygon(0% 16.5%, 100% 20%, 100% 100%, 0% 100%); -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); } 100% { -webkit-clip-path: polygon(0% 20%, 100% 16.5%, 100% 100%, 0% 100%); clip-path: polygon(0% 20%, 100% 16.5%, 100% 100%, 0% 100%); }
}
@-webkit-keyframes bubble1 { 0% { opacity: 0; -webkit-transform: translate(-20px, 0); transform: translate(-20px, 0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(-20px, -206px); transform: translate(-20px, -206px); }
}
@keyframes bubble1 { 0% { opacity: 0; -webkit-transform: translate(-20px, 0); transform: translate(-20px, 0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(-20px, -206px); transform: translate(-20px, -206px); }
}
@-webkit-keyframes bubble2 { 0% { opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(0, -206px); transform: translate(0, -206px); }
}
@keyframes bubble2 { 0% { opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(0, -206px); transform: translate(0, -206px); }
}
@-webkit-keyframes bubble3 { 0% { opacity: 0; -webkit-transform: translate(20px, 0); transform: translate(20px, 0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(20px, -206px); transform: translate(20px, -206px); }
}
@keyframes bubble3 { 0% { opacity: 0; -webkit-transform: translate(20px, 0); transform: translate(20px, 0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(20px, -206px); transform: translate(20px, -206px); }
}
Sloshing Beaker - Script Codes
Sloshing Beaker - Script Codes
Home Page Home
Developer Mark Thomes
Username WithAnEs
Uploaded July 04, 2022
Rating 3.5
Size 7,223 Kb
Views 46,552
Do you need developer help for Sloshing Beaker?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Thomes (WithAnEs) Script Codes
Name
CSS Birthday Cake
CSS Colorado Flag
Twitter Feed Loading Animation
CSS3 Gradient Stripes
Pharmacy Loader
Save Bar
Hiding in a box
Beer Color
Animation Delay Debug
SVG Stroke Pie Chart
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!