3D Glowing Bottle HTML CSS
Learn how to create a 3D Glowing Bottle animation using CSS. This beginner-friendly tutorial will guide you through the code and its functionality.
Code Snippets
1. HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
3D Glowing Bottle
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<div class="shadow"></div>
<div class="bowl">
<div class="liquid"></div>
</div>
</section>
</body>
</html>
2. CSS (styles.css)
@import url('https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&family=Kanit&family=Mrs+Sheppards&family=Oswald:wght@700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #121212;
}
.bowl{
position: relative;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
border: 8px solid transparent;
animation: animate 5s linear infinite;
transform-origin: bottom center;
animation-play-state: run;
}
@keyframes animate{
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(22deg);
}
50%{
transform: rotate(0deg);
}
75%{
transform: rotate(-22deg);
}
100%{
filter: hue-rotate(360deg);
}
}
.bowl::before{
content: "";
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 40%;
height: 30px;
border: 15px solid #444;
border-radius: 50%;
box-shadow: 0 10px #222;
}
.bowl::after{
content: "";
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%,-50%);
width: 150px;
height: 60px;
background: rgba(255, 255, 255, 0.05);
transform-origin: center;
animation: animatebowlshadow 5s linear infinite;
border-radius: 50%;
animation-play-state: running;
}
@keyframes animatebowlshadow{
0%{
left: 50%;
width: 150px;
height: 60px;
}
25%{
left: 55%;
width: 140px;
height: 65px;
}50%{
left: 50%;
width: 150px;
height: 60px;
}
75%{
left: 45%;
width: 140px;
height: 65px;
}
100%{
}
}
.liquid{
position: absolute;
top: 50%;
left: 5px;
right: 5px;
bottom: 5px;
background: #1ae907;
border-bottom-left-radius: 150px;
border-bottom-right-radius: 150px;
filter: drop-shadow(0 0 80px #1ae907);
transform-origin: top center;
animation: animateliquid 5s linear infinite;
animation-play-state: running;
}
@keyframes animateliquid{
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(-22deg);
}
30%{
transform: rotate(-23deg);
}
50%{
transform: rotate(0deg);
}
75%{
transform: rotate(22deg);
}
80%{
transform: rotate(23deg);
}
100%{
transform: rotate(0deg);
}
}
.liquid::before{
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: #15be05;
border-radius: 50%;
filter:drop-shadow(0 0 80px #15be05) ;
}
.shadow{
position: absolute;
top: calc(50% + 150px);
left: 50%;
transform: translate(-50%,-50%);
width: 260px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
animation: animateshadow 5s linear infinite;
animation-play-state: running;
}
@keyframes animateshadow{
0%{
left: 50%;
width: 260px;
height: 40px;
top: calc(50% + 150px);
}
25%{
left: 55%;
width: 265px;
height: 30px;
top: calc(50% + 130px);
}50%{
left: 50%;
width: 260px;
height: 40px;
top: calc(50% + 150px);
}75%{
left: 45%;
width: 265px;
height: 30px;
top: calc(50% + 130px);
}100%{
}
}
Explanation
- @keyframes animate: Defines the wobbling animation for the bowl. At different percentages, the bowl rotates to create a rocking motion (e.g., 22° clockwise at 25% and 22° counter-clockwise at 75%).
- .bowl: Represents the main bowl. It is styled as a circle using
border-radius: 50%, given a transparent border, and animated with theanimatekeyframe. - .bowl::before: Creates the top rim of the bowl. This pseudo-element is styled as a small, rounded shape positioned above the bowl.
- @keyframes animateliquid: Animates the liquid's tilt within the bowl to synchronize with the bowl's motion. At specific percentages, the liquid rotates slightly more to enhance the wobbling effect.
- .liquid: Represents the liquid inside the bowl. It is styled with a vibrant green color, a semi-circular bottom, and a glowing effect using
filter: drop-shadow. - .shadow: Adds a shadow beneath the bowl, animated to follow the bowl's movement, shrinking and shifting as the bowl wobbles.
- @keyframes animateshadow: Animates the shadow to mimic the perspective changes caused by the bowl's wobble. It adjusts the position, width, and height of the shadow dynamically.
How it Works:
- HTML: Contains a
divstructure to create the bowl, liquid, and shadow elements. The.bowldiv serves as the main container, with pseudo-elements for the rim and shadow, and a nested.liquiddiv for the contents. - CSS:
- The
@keyframesrules define animations for the bowl, liquid, and shadow, ensuring synchronized movement. - The
.bowlclass creates the primary structure, while.bowl::beforeand.bowl::afteradd decorative and functional elements like the rim and shadow. - The
.liquidclass simulates the liquid using background color, glow effects, and rotation animations. - The
.shadowclass mimics a dynamic shadow below the bowl, changing its size and position based on the wobble.
- The
Instructions to Use:
- Create two files: One for HTML (e.g.,
index.html) and one for CSS (e.g.,styles.css). - Link them: Make sure the HTML file links to the CSS file using the
<link rel="stylesheet" href="styles.css">tag in the<head>section. - Open the HTML file: Open
index.htmlin a browser to see the bouncing ball animation in action.
Try It Yourself
Copy the code above and paste it into your HTML or CSS editor to experiment with the animation. You can change the bounce height or speed to make it your own!
Demo
Check out the animation in action: View on Instagram
Comments
Post a Comment