Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. also subscribe to my youtube channel where I post new tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called – ‘Tea Cup Animation’.Inside this folder, we have two files – index.html and style.css. The first file is the HTML document and the second file is the stylesheet.
HTML:
We begin with the HTML code. The HTML code creates elements necessary to build the structure and layout of our document. First, copy the code provided to you below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tea Cup Animation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="teabag">
<div class="string"></div>
</div>
<div class="teacup">
<div class="eye eye-l"></div>
<div class="eye eye-r"></div>
<div class="mouth"></div>
<div class="saucer"></div>
</div>
</div>
</body>
</html>
CSS:
Next, we style these elements to shape them into desired parts to create the illustration. We also use CSS to animate these shapes.Now copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f1bb34;
}
.container {
height: 100vh;
width: 31.25em;
position: absolute;
transform: translateX(-50%);
left: 50%;
}
.teacup {
position: absolute;
background-color: #ede7de;
height: 20em;
width: 21.87em;
border-radius: 1.25em 1.25em 9.37em 9.37em;
bottom: 6.25em;
left: 2.5em;
}
.teacup:before {
position: absolute;
content: "";
height: 6.25em;
width: 6.25em;
border: 1.56em solid #ede7de;
right: -6.25em;
bottom: 7.5em;
border-radius: 50%;
}
.eye {
position: absolute;
content: "";
height: 1.87em;
width: 3.75em;
background-color: transparent;
border: 0.62em solid #272048;
border-radius: 3.75em 3.75em 0 0;
border-bottom: none;
top: 5em;
animation: open-eye 8s infinite;
}
@keyframes open-eye {
30% {
height: 1.87em;
width: 3.75em;
background-color: transparent;
border: 0.62em solid #272048;
border-radius: 3.75em 3.75em 0 0;
border-bottom: none;
}
35% {
height: 1.87em;
width: 1.87em;
background-color: #272048;
border: none;
border-radius: 50%;
}
100% {
height: 1.87em;
width: 1.87em;
background-color: #272048;
border: none;
border-radius: 50%;
}
}
.eye-l {
left: 4.37em;
}
.eye-r {
right: 4.37em;
}
.mouth {
position: absolute;
background-color: #f26464;
height: 4.68em;
width: 9.37em;
border-radius: 1.25em 1.25em 9.37em 9.37em;
bottom: 5em;
left: 6.25em;
overflow: hidden;
}
.mouth:before {
content: "";
position: absolute;
height: 9.37em;
width: 9.37em;
background-color: #c24c4c;
border-radius: 50%;
top: 1.87em;
}
.saucer {
height: 2.5em;
width: 25em;
background-color: #ede7de;
position: absolute;
bottom: -0.62em;
left: -1.25em;
border-radius: 2.5em;
}
.saucer:before {
position: absolute;
content: "";
height: 1.87em;
width: 21.87em;
top: 2.5em;
background: linear-gradient(#dbd4cc 30%, #f0ede6 30%);
left: 1.25em;
border-radius: 2.5em;
}
.teabag {
position: absolute;
background-color: #ffc684;
height: 5.62em;
width: 5.62em;
top: -15em;
left: 10.31em;
animation: dip 8s infinite;
}
@keyframes dip {
30% {
background-color: #ffc684;
transform: translateY(46.5em);
}
60% {
background-color: #462f29;
transform: translateY(21.87em);
}
100% {
background-color: #462f29;
transform: translateY(0);
}
}
.teabag:before {
position: absolute;
content: "";
height: 10em;
width: 7.5em;
background-color: rgba(230, 237, 239, 0.3);
clip-path: polygon(0% 100%, 0% 25%, 25% 0%, 75% 0%, 100% 25%, 100% 100%);
background-image: radial-gradient(
rgba(255, 255, 255, 0.5) 0.18em,
transparent 0.18em
);
background-size: 1.25em 1.25em;
left: -0.93em;
bottom: -1.25em;
}
.teabag:after {
position: absolute;
content: "";
height: 0.62em;
width: 3.75em;
background-color: #f1bb34;
border-radius: 0.62em;
left: 0.93em;
bottom: 7.18em;
}
.string {
position: absolute;
height: 30.25em;
width: 0.31em;
background-color: #272048;
left: 2.81em;
top: -31.87em;
}
That’s it for this tutorial. If you face any issues while creating this code you can download the source code y clicking on the download button below. Also if you have any queries, suggestions or feedback you can comment on them below.
Happy Coding!
