Create an animated greeting card using CSS animations

Hey, I am Ajink and today in this blog, we’re going to create an animated greeting card using CSS animations.

HTML Code: create a index.html file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
   <title>Animated Greeting Card</title>
</head>
<body>
  <div class="card">
    <div class="greeting">Happy New Year!</div>
    <div class="fireworks"></div>
  </div>
</body>
</html>

HTML Code Explanation:

  • We start with a basic HTML structure, linking to an external stylesheet (style.css) .
  • Inside the body tag, we have a div with the class card that contains two child elements: one for the greeting message and another for the animated fireworks.

CSS Code: create a style.css

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.card {
  position: relative;
  width: 300px;
  height: 200px;
  border: 2px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.greeting {
  text-align: center;
  font-size: 18px;
  padding: 20px;
  background-color: #3498db;
  color: #fff;
}

.fireworks {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Fireworks/Red_Firework_PNG_Transparent_Clipart.png?m=1610454539');
  background-size: cover;
  animation: fireworksAnimation 4s infinite;
  opacity: 0.8;
}

@keyframes fireworksAnimation {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

CSS Code Explanation:

  • The CSS starts by setting up the overall styling. The body is styled to be a flex container, centering its content both vertically and horizontally.
  • The card class represents the greeting card. It has a defined size, rounded corners, and a border.
  • The greeting class styles the message, giving it a centered position, specific font size, padding, and background color.
  • The fireworks class sets the background image to ‘fireworks.png’ and applies a CSS animation named fireworksAnimation to create the animated effect.

Conclusion:

In this blog, we successfully created an animated greeting card using HTML, CSS, and a touch of JavaScript for animation. You can customize the message and background image to suit different occasions. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.

Ajink Gupta
Ajink Gupta

Ajink Gupta is a software developer from Dombivli, Maharashtra, India. He has expertise in a variety of technologies including web development, mobile app development, and blockchain. He works with languages and frameworks like JavaScript, Python, Flutter, React, and Django.

Ajink Gupta is also active on several platforms where he shares his work and engages with the community. You can find his projects and contributions on GitHub and follow his tutorials and updates on his YouTube channel​ . He also has a personal website where he showcases his portfolio and ongoing projects at ajinkgupta.vercel.app

Articles: 60