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
bodytag, we have adivwith the classcardthat 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
bodyis styled to be a flex container, centering its content both vertically and horizontally. - The
cardclass represents the greeting card. It has a defined size, rounded corners, and a border. - The
greetingclass styles the message, giving it a centered position, specific font size, padding, and background color. - The
fireworksclass sets the background image to ‘fireworks.png’ and applies a CSS animation namedfireworksAnimationto 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.
