Rate this post

Welcome to a fresh and exciting web design tutorial where we’ll create a steaming coffee cup animation using HTML and CSS. This effect brings a touch of warmth and dynamic visual interest to your web pages. Let’s dive into the process and understand the code behind this delightful animation.

Table of Contents

THE CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HOT COFFEE</title>
</head>
<style>
  body {
	background: #8acdeb;
}
#container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.steam {
  position: absolute;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: #fff;
  margin-top: -75px;
  margin-left: 75px;
  z-index: 0;
  opacity: 0;
}

#steam1 {
  -webkit-animation: steam1 4s ease-out infinite;
  animation: steam1 4s ease-out infinite;
}

#steam3 {
  -webkit-animation: steam1 4s ease-out 1s infinite;
  animation: steam1 4s ease-out 1s infinite;
}

@-webkit-keyframes steam1 {
  0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;}
  100% {transform: translateY(-200px) translateX(-20px) scale(1); opacity: 0;}
}

@keyframes steam1 {
  0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;}
  100% {transform: translateY(-200px) translateX(-20px) scale(1); opacity: 0;}
}

#steam2 {
  -webkit-animation: steam2 4s ease-out 0.5s infinite;
  animation: steam2 4s ease-out 0.5s infinite;
}

#steam4 {
  -webkit-animation: steam2 4s ease-out 1.5s infinite;
  animation: steam2 4s ease-out 1.5s infinite;
}

@-webkit-keyframes steam2 {
  0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;}
  100% {transform: translateY(-200px) translateX(20px) scale(1); opacity: 0;}
}

@keyframes steam2 {
  0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;}
  100% {transform: translateY(-200px) translateX(20px) scale(1); opacity: 0;}
}

#cup {
  z-index: 1;
}

#cup-body {
  position: absolute;
  height: 200px;
  width: 300px;
  border-radius: 0 0 150px 150px;
  background-color: #fff;
  margin: auto;
  display: inline-block;
  overflow: hidden;
  z-index: 1;
}

#cup-shade {
  position: relative;
  height: 300px;
  width: 200px;
  background-color: #F3F3F3;
  display: inline-block;
  margin-left: 42%;
  margin-top: -3px;
  transform: rotate(50deg);
  z-index: 1;
}

#cup-handle {
  position: relative;
  height: 75px;
  width: 80px;
  border-radius: 0 150px 150px 0;
  border: 15px solid #F3F3F3;
  margin-bottom: 95px;
  margin-left: 250px;
  display: inline-block;
  z-index: 0;
}

#saucer {
  position: absolute;
  height: 30px;
  width: 300px;  
  border-radius: 0 0 100px 100px;
  background-color: #F9F9F9;
  margin-top: -32px;
  margin-left: 5px;
  z-index: 2;
}

#shadow {
  height: 10px;
  width: 300px;
  border-radius: 50%;
  margin-top: -5px;
  margin-left: 6px;
  background-color: #7bb8d4;
}
</style>
<body>
  <div id="container">
    <div class="steam" id="steam1"> </div>
    <div class="steam" id="steam2"> </div>
    <div class="steam" id="steam3"> </div>
    <div class="steam" id="steam4"> </div>

    <div id="cup">
        <div id="cup-body">
            <div id="cup-shade"></div>
        </div>
        <div id="cup-handle"></div>
    </div>

    <div id="saucer"></div>

    <div id="shadow"></div>
</div>
</body>
</html>

Overview of the Animation

The goal of this project is to create a simple but engaging hot coffee animation. This involves rendering a coffee cup with steam rising from it, creating a cozy and inviting effect. Here’s a breakdown of the HTML and CSS used to achieve this:

Breakdown of the Code

Setting the Scene

Background Color: The body background is set to a soft blue (#8acdeb), mimicking a serene and inviting environment.

body {
  background: #8acdeb;
}

Container Positioning: The #container div is centered on the page using absolute positioning and transforms. This ensures that the coffee cup animation is centrally located.

#container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Creating the Steam

Steam Divs: Multiple steam divs are used to simulate the steam rising from the coffee cup. Each steam div is styled as a white circle with a gradual fade-out effect.

.steam {
  position: absolute;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: #fff;
  margin-top: -75px;
  margin-left: 75px;
  z-index: 0;
  opacity: 0;
}

Animation: Two sets of steam animations (steam1 and steam2) create a dynamic effect where the steam rises and shifts slightly. Different timings are used for each set to create a natural, random-looking movement.

@keyframes steam1 {
  0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;}
  100% {transform: translateY(-200px) translateX(-20px) scale(1); opacity: 0;}
}

@keyframes steam2 {
  0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;}
  100% {transform: translateY(-200px) translateX(20px) scale(1); opacity: 0;}
}

Designing the Coffee Cup

Cup Body: The coffee cup’s body is styled with a rounded bottom, representing the main part of the cup.

#cup-body {
  position: absolute;
  height: 200px;
  width: 300px;
  border-radius: 0 0 150px 150px;
  background-color: #fff;
  margin: auto;
  display: inline-block;
  overflow: hidden;
}

Cup Handle and Shade: The handle and shade are added for realism. The handle is positioned to the side of the cup, while the shade adds a slight tilt, enhancing the 3D effect.

#cup-handle {
  position: relative;
  height: 75px;
  width: 80px;
  border-radius: 0 150px 150px 0;
  border: 15px solid #F3F3F3;
  margin-bottom: 95px;
  margin-left: 250px;
  display: inline-block;
}

#cup-shade {
  position: relative;
  height: 300px;
  width: 200px;
  background-color: #F3F3F3;
  display: inline-block;
  margin-left: 42%;
  margin-top: -3px;
  transform: rotate(50deg);
}

Adding the Saucer and Shadow

Saucer: Positioned below the cup, the saucer is given a light color to complement the coffee cup.

#saucer {
  position: absolute;
  height: 30px;
  width: 300px;  
  border-radius: 0 0 100px 100px;
  background-color: #F9F9F9;
  margin-top: -32px;
  margin-left: 5px;
}

Shadow: A subtle shadow effect is added under the saucer to enhance the visual depth.

#shadow {
  height: 10px;
  width: 300px;
  border-radius: 50%;
  margin-top: -5px;
  margin-left: 6px;
  background-color: #7bb8d4;
}

Conclusion

This HTML and CSS example demonstrates how you can create a visually appealing hot coffee animation with relatively simple code. By combining CSS animations with creative styling, you can produce engaging and dynamic effects that enhance the user experience on your web pages.

Feel free to customize the colors, sizes, and animation timings to suit your preferences. Happy coding, and may your web pages be as warm and inviting as a freshly brewed cup of coffee!

If you have any questions or need further assistance with your animations, let me know in the comments!