Cup of hot chocolate animation by Learn code free online.
hot chocolate pouring in a cup animation with pure css and html. here we are making cup, tea flow, shadow under cup and steam over cup animations. we are not using any svg image here. "bowl" is a class name for cup. teaflow is class name for pouring tea flow, coffee-shadow is class name for shadow under cup and four divs we are using as steam animation. see the below html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<div class="bowl"></div>
<div class="tea"></div>
<div class="coffee-shadow"></div>
<div class="handle"></div>
<div class="teaflow"></div>
<div class="steam1"></div>
<div class="steam2"></div>
<div class="steam3"></div>
<div class="steam4"></div>
</div>
</body>
</html>
css code for the above animation
.cup-body{
width: 100vw;
height: 600px;
background-color: #6e6e6e;
background-position: bottom;
background-size: contain;
background-clip: content-box;
}
.bowl{
width: 300px;
height:280px;
border-bottom-left-radius:200px ;
border-bottom-right-radius: 200px;
border-top-left-radius:150px;
border-top-right-radius:150px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
background: linear-gradient(180deg, rgba(195,37,37,1) 18%, rgba(89,17,17,1) 100%);
}
.bowl::before{
content: '';
position:absolute;
z-index: 1;
top: -3px;
left: 42px;
height: 65px;
width: 215px;
margin: 0 auto;
border-bottom: 10px solid rgb(195,37,37,1);
background: radial-gradient(circle, rgb(144, 45, 45) 61%, rgba(60,38,38,1) 100%);
border-radius: 100%;
}
.bowl::after{
content: '';
position:absolute;
z-index: 0;
top: 57px;
left: 77px;
height: 40px;
width: 150px;
margin: 0 auto;
border-radius: 100%;
background-color: rgba(228, 236, 244, .2);
overflow: hidden;
}
.tea{
position:relative;
z-index: 3;
margin: 0 auto;
border-radius: 200%;
animation:pouringtea 8s ease-in-out 5s ;
animation-fill-mode: forwards;
background: linear-gradient(90deg, rgba(168,74,39,0.958420868347339) 61%, rgba(205,153,121,0.927608543417367) 100%);
}
.coffee-shadow{
position:absolute;
top:415px;
left:650px;
background:#393c41;
height:30px;
width: 65px;
border-radius: 50%;
box-shadow: 0px 0px 40px 68px #4b453c;
}
@keyframes pouringtea{
20%{
top: 231px;
left: 1px;
height: 5px;
width: 90px;
}
40%{
top: 222px;
left: 1px;
height: 15px;
width: 120px;
}
60%{
top: 219px;
left: 1px;
height: 20px;
width: 150px;
}
80%{
top: 202px;
left: 0px;
height: 34px;
width: 190px;
}
100%{
top: 186px;
left: 0px;
height: 50px;
width: 210px;
}
}
.teaflow{
position:absolute;
top: -63px;
left: 50%;
width: 15px;
height: 30px;
background: linear-gradient(90deg, rgba(147,69,40,0.758420868347339) 58%, rgba(205,153,121,0.727608543417367) 83%);
animation: teaflow1 2.8s linear 3s,
teaflow2 3.5s linear 6s,
teaflow3 1.6s linear 9.7s,
teaflow4 1.8s linear 11.4s;
z-index: 3;
}
.handle{
position:absolute;
right:460px;
top:240px;
width:65px;
height: 110px;
transform:rotate(4deg);
background-color:transparent;
border-radius: 10% 50% 130px 0;
border: 30px solid rgb(160, 29, 29);
}
.handle::before{
content: '';
position:absolute;
right:-10px;
top:0px;
width:65px;
height: 100px;
transform:rotate(-15deg);
background-color:transparent;
border-radius: 10% 50% 130px 0;
border-right: 10px solid rgb(122, 19, 19);
}
.handle::after{
content: '';
position:absolute;
right:-24px;
top:-30px;
width:115px;
height: 120px;
background-color:transparent;
border-radius: 10% 50% 130px 0;
border-top: 10px solid rgba(253, 253, 253, 0.2);
}
.steam1{
position:absolute;
right:600px;
top:150px;
width:85px;
height: 100px;
transform:rotate(-15deg);
background-color:transparent;
border-radius: 10% 50% 130px 0px;
border-right: 30px solid rgba(232, 225, 225, 0.4);
filter:blur(15px);
z-index: 4;
animation: steaming1 6s linear infinite 10s;
opacity: 0;
}
@keyframes steaming1{
10%{
opacity: 1;
}
100%{
transform: translateY(-200px) translateX(20px);
opacity: 0;
filter: blur(15px);
}
}
@keyframes steaming2{
10%{
opacity: 1;
}
100%{
transform: translateY(-200px) translateX(-20px);
opacity: 0;
filter: blur(15px);
}
}
.steam2{
position:absolute;
right:640px;
top:150px;
width:85px;
height: 100px;
transform:rotate(20deg);
background-color:transparent;
border-radius: 50% 10% 0px 130px;
border-left: 30px solid rgba(232, 225, 225, 0.4);
filter:blur(15px);
z-index: 4;
animation: steaming2 6s linear infinite 12s;
opacity: 0;
}
.steam3{
position:absolute;
right:660px;
top:150px;
width:85px;
height: 100px;
transform:rotate(-15deg);
background-color:transparent;
border-radius: 10% 50% 130px 0px;
border-right: 30px solid rgba(232, 225, 225, 0.4);
filter:blur(15px);
z-index: 4;
animation: steaming2 6s linear infinite 13s;
opacity: 0;
}
.steam4{
position:absolute;
right:620px;
top:150px;
width:85px;
height: 100px;
transform:rotate(20deg);
background-color:transparent;
border-radius: 50% 10% 0px 130px;
border-left: 30px solid rgba(232, 225, 225, 0.4);
filter:blur(15px);
z-index: 4;
animation: steaming1 6s linear infinite 14s;
opacity: 0;
}
@keyframes teaflow1{
10%{
height:300px;
}
100%{
height:300px;
}
}
@keyframes teaflow2{
10%{
height:300px;
}
100%{
height:300px;
}
}
@keyframes teaflow3{
10%{
height:295px;
}
100%{
height:295px;
}
}
@keyframes teaflow4{
10%{
height:290px;
}
100%{
height:290px;
}
}
Copyright2022 Learn code free online. All Rights Reserved.