HTML Code
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Tea Cup</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:8;"></span>
<span style="--i:9;"></span>
<span style="--i:6;"></span>
<span style="--i:1;"></span>
<span style="--i:1;"></span>
</div>
<div class="circle">
<div class="tea"></div>
</div>
</div>
<div class="handle"></div>
</div>
</div>
</body>
</html>
CSS Code
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height:100vh;
background: #758eb7;
}
.container
{
position: relative;
top: 50px;
}
.cup
{
position: relative;
width: 280px;
height: 290px;
background: linear-gradient(to right,#ee9ca7,#ee9ca7);
border-bottom-left-radius: 45%;
border-bottom-right-radius: 45%;
}
.top
{
position: absolute;
top: -30px;
left: 0;
width: 100%;
height: 60px;
background: linear-gradient(to right,#ee9ca7,#ee9ca7);
border-radius: 50%;
}
.circle
{
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: linear-gradient(#ffbe88,#e28462);
border-radius: 50%;
}
.handle
{
position: absolute;
right: -70px;
top: 40px;
width: 160px;
height: 180px;
border: 25px solid #ee9ca7;
border-left: solid transparent;
border-bottom: solid transparent;
border-radius: 50%;
transform: rotate(42deg);
}
.plate
{
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: 200px;
background: linear-gradient(to right,#f9f9f9,#d9d9d9);
border-radius: 50%;
box-shadow: 8 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;
background: radial-gradient(rgba(0,0,0,0.2) 25%,transparent,transparent);
border-radius: 50%;
}
.vapour
{
position: relative;
display: flex;
z-index: 1;
padding: 0 10px;
}
.vapour span
{
position: relative;
bottom: 50px;
display: flex;
margin: 0 20px 50px;
min-width: 7px;
height: 150px;
background: #fff;
border-radius: 50%;
animation: animate 5s linear infinite;
opacity: 0;
filter: blur(9px);
animation-delay: calc(var(--i)* -0.5s);
}
@keyframes animate
{
0%
{
transform: translateY(0) scaleX(1);
opacity: 0;
}
25%
{
opacity: 1;
}
50%
{
transform: translateY(-150px) scaleX(5);
}
95%
{
opacity: 0;
}
100%
{
transform: translateY(-300px) scaleX(5);
}
}
OUTPUT
Posts
50 Comments
Today I enjoyed morning tea
ReplyDeleteWow 😊😊😊😊
ReplyDeleteVery good job 🙏🙏🙏🙏
ReplyDeleteExcellent
ReplyDeletewonderful 😊😊😊
ReplyDeleteKallu
ReplyDeleteWowwww
Great
ReplyDeleteInteresting
ReplyDeleteAmazing
ReplyDeleteWonderful
ReplyDeletesuperb
ReplyDeleteExcellent
ReplyDeleteattractive
ReplyDeleteNicely done
ReplyDeleteVery nice
ReplyDeletePowerful
ReplyDeletevery hot tea 🍵
ReplyDeleteNice Cup Of Tea
ReplyDeleteAwesome
ReplyDeleteExcellent job
ReplyDeleteSuperb quality and excellent
ReplyDeleteLovely
ReplyDeleteSuper
ReplyDeleteVery Interesting
ReplyDeleteoutstanding work
ReplyDeleteBest
ReplyDeleteNice Cup & Plate
ReplyDeletesuperb
ReplyDeleteWonderful
ReplyDeleteSuper
Attractive
ReplyDeleteNice working with HTML & CSS Guys
ReplyDeleteFull On Enjoyable Guys
ReplyDeleteGood Understanding in Programming
ReplyDeleteWinter Refresh Tea
ReplyDeleteGood job
ReplyDeleteWow Its So Hot
ReplyDeleteInteresting
ReplyDeleteFantastic
ReplyDeletefantastic job
ReplyDeleteAwesome
ReplyDeleteGreat
ReplyDeleteVery Nice
ReplyDeleteexcellent
ReplyDeleteAmazing
ReplyDeleteWow Its great
ReplyDeleteOsm
ReplyDeleteSuperb
ReplyDeleteVERY nice
ReplyDeleteHello
ReplyDeleteMore Attractive 😍😍😍😍
ReplyDelete