Table of Contents
How to Create an Animated Hot Cup of Tea Using HTML & CSS
Adding delightful animations to your website can bring it to life and enhance the user experience. In this tutorial, we’ll create a cozy animated hot cup of tea using HTML & CSS, complete with a plate, cup, and steaming vapors. This effect is perfect for websites in the food, lifestyle, or even tech domains where a little bit of warmth and movement can make all the difference.
We’ll use HTML to structure the cup, plate, and steam elements, and CSS to style and animate them. Whether you’re a beginner looking to add animations to your site or an experienced developer refining your skills, this project will be both fun and instructive.
HTML and CSS Code Breakdown
The effect includes a teacup with steam rising, achieved through CSS animations. We’ll use HTML for the structure and CSS to design the teacup, the plate, and the rising steam. Below, you’ll find the complete code, along with a breakdown of each section to help you understand and customize the animation.
HTML Structure
The HTML code defines a simple container with a cup, plate, and animated steam elements. Here’s how it works:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animated Tea Cup | CSS Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="plate"></div> <div class="cup"> <div class="top"> <div class="vapour"> <span style="--i:1;"></span> <span style="--i:7;"></span> <span style="--i:2;"></span> <span style="--i:11;"></span> <span style="--i:10;"></span> <span style="--i:14;"></span> <span style="--i:18;"></span> <span style="--i:6;"></span> <span style="--i:19;"></span> <span style="--i:20;"></span> <span style="--i:9;"></span> <span style="--i:16;"></span> <span style="--i:4;"></span> <span style="--i:8;"></span> <span style="--i:13;"></span> <span style="--i:5;"></span> <span style="--i:12;"></span> <span style="--i:17;"></span> <span style="--i:3;"></span> <span style="--i:15;"></span> </div> <div class="circle"> <div class="tea"></div> </div> </div> <div class="handle"></div> </div> </div> </body> </html>
Explanation of HTML Structure
- Container: Holds all elements for positioning and styling.
- Plate: Positioned under the cup, creating a realistic look.
- Cup: The main tea cup element, structured with a “top” section for the tea and vapour elements.
- Vapour: Contains multiple
<span>elements, each styled in CSS to animate the rising steam effect.
CSS Styling
With the structure in place, we’ll move on to the styling, where the main animation magic happens.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
background: #607d8b;
min-height: 100vh;
}
.container
{
position: relative;
top: 50px;
}
.cup
{
position: relative;
width: 280px;
height: 300px;
background: linear-gradient(to right,#f9f9f9,#d9d9d9);
border-bottom-left-radius: 45%;
border-bottom-right-radius: 45%;
}
.cup .top
{
position: absolute;
top: -30px;
left: 0;
width: 100%;
height: 60px;
background: linear-gradient(to right,#f9f9f9,#d9d9d9);
border-radius: 50%;
box-sizing: border-box;
}
.cup .top .circle
{
content: '';
position: absolute;
top: 5px;
left: 10px;
width: calc(100% - 20px);
height: 50px;
background: linear-gradient(to left,#f9f9f9,#d9d9d9);
border-radius: 50%;
box-sizing: border-box;
overflow: hidden;
}
.tea
{
position: absolute;
top: 20px;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient( #c57e65, #e28462);
border-radius: 50%;
display: flex;
}
.handle
{
position: absolute;
right: -70px;
top: 40px;
width: 160px;
height: 180px;
border-left: 25px solid transparent;
border-bottom: 25px solid transparent;
border-top: 25px solid #dcdcdc;
border-right: 25px solid #dcdcdc;
border-radius: 50%;
transform: rotate(42deg);
}
.plate
{
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: 200px;
border-radius: 50%;
background: linear-gradient(to right,#f9f9f9,#e7e7e7);
box-shadow: 0 35px 35px rgba(0,0,0,0.2);
}
.plate:before
{
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border-radius: 50%;
background: linear-gradient(to left,#f9f9f9,#e7e7e7);
}
.plate:after
{
content: '';
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
border-radius: 50%;
background: radial-gradient(rgba(0,0,0,0.2) 25%, transparent, transparent);
}
.vapour
{
position: relative;
display: flex;
z-index: 1;
padding: 0 20px;
}
.vapour span
{
position: relative;
bottom: 50px;
display: block;
margin: 0 2px 50px;
min-width: 8px;
height: 120px;
background: #fff;
animation: animate 5s linear infinite;
animation-delay: calc(var(--i) * -0.5s);
filter: blur(8px);
border-radius: 50%;
opacity: 1;
}
@keyframes animate
{
0%
{
transform: translateY(0) scaleX(1);
opacity: 0;
}
15%
{
opacity: 1;
}
50%
{
transform: translateY(-150px) scaleX(5);
}
95%
{
opacity: 0;
}
100%
{
transform: translateY(-300px) scaleX(10);
opacity: 0;
}
}
CSS Animation Explanation
The .vapour span elements animate the steam, each styled to rise, expand, and disappear, simulating steam wafting from the cup.
- Keyframes: Controls the movement and opacity of each steam element.
- Animation Delay: Each span has a
--ivalue for staggered delays, creating a natural steam flow.
Download the full source code and follow along to build this animated tea cup yourself.
Conclusion
Creating an animated hot cup of tea using HTML & CSS is a fun way to add interactivity to your projects. Experiment with colors, add more animation effects, or adjust the vapour’s appearance to match your style!
