syndicated · dev.to / @markyu
Create a Heart Shaped Animation with CSS3
Introduction Creating a personalized love confession page can be a fun and heartfelt way...
- Published
- May 22 '24
- Reading time
- 3 min read
- Reactions
- 9
htmlcsscodepenanimation
syndicated · dev.to / @markyu
Introduction Creating a personalized love confession page can be a fun and heartfelt way...
webdev
Introduction Creating dynamic 3D scenes in web development can elevate your design, making...
database
In today’s fast-paced, data-driven world, businesses have more access to data than ever before....
ipaddresses
Ever wondered how devices communicate within a network? Or perhaps you've come across terms like "IP...
originally published
This post first ran on dev.to. Comments and reactions live there.
Continue on dev.toCreating a personalized love confession page can be a fun and heartfelt way to express your feelings. By using HTML5, CSS3 animations, and a touch of JavaScript, you can create a beautiful page with an animated heart effect. In this tutorial, we will walk you through a simple example to get you started.
First, we need to set up our HTML structure. This includes a div for the heart shape and a div for the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>520 Confession</title>
<style>
@keyframes heartBeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(0.9); }
100% { transform: scale(1); }
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0e0d8;
margin: 0;
overflow: hidden;
}
.heart {
position: relative;
width: 100px;
height: 90px;
animation: heartBeat 1s infinite;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
width: 50px;
height: 80px;
background-color: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
top: 0;
left: 50px;
}
.heart:after {
left: 0;
transform: rotate(45deg);
}
.text {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 24px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="heart"></div>
<div class="text">520 I Love You</div>
</body>
</html>In this example, we use CSS3 animations to create a heartbeat effect. The @keyframes rule defines the animation named heartBeat, which scales the heart shape at different intervals.
@keyframes heartBeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(0.9); }
100% { transform: scale
To help you understand each part of the code, let's break it down:
HTML Structure:
<!DOCTYPE html> declaration defines the document type as HTML5.<html lang="en"> tag sets the language of the document to English.<head> tag, we define the character encoding with <meta charset="UTF-8"> and the title of the page with <title>520 Confession</title>.CSS Styling:
@keyframes heartBeat: Defines the keyframe animation sequence for the heart. The heart scales up and down to create a beating effect.
0% and 100%: Scale at normal size.25%: Scale up to 1.1 times the original size.75%: Scale down to 0.9 times the original size.body: Styles the body of the document to center the content both horizontally and vertically.
display: flex; justify-content: center; align-items: center;: Uses Flexbox to center the items.height: 100vh;: Sets the height to 100% of the viewport height.background-color: #f0e0d8;: Sets the background color.margin: 0;: Removes the default margin.overflow: hidden;: Hides any overflow content..heart: Styles the heart container.
This example demonstrates how to create a simple, yet visually appealing love confession page with an animated heart effect using HTML5 and CSS3. You can further customize the styles and animations to suit your needs and make your confession page even more special.
Feel free to experiment with different colors, sizes, and animation timings to create a unique and personalized experience.
I hope this helps you create your own beautiful and animated love confession page!
position: relative;: Positions the element relative to its normal position.width: 100px; height: 90px;: Sets the size of the heart.animation: heartBeat 1s infinite;: Applies the heartbeat animation with a 1-second duration, running infinitely..heart:before, .heart:after: Styles the pseudo-elements to create the heart shape.
content: "";: Adds content for the pseudo-elements.position: absolute;: Positions the elements absolutely within the .heart container.width: 50px; height: 80px; background-color: red;: Sets the size and color of the pseudo-elements.border-radius: 50px 50px 0 0;: Rounds the top corners to form the top of the heart.transform: rotate(-45deg); top: 0; left: 50px;: Rotates and positions the left half of the heart..heart:after: Rotates and positions the right half of the heart..text: Styles the text element.
position: absolute; top: 50%; transform: translateY(-50%);: Centers the text vertically within the heart.color: #fff;: Sets the text color to white.font-size: 24px; font-family: Arial, sans-serif;: Sets the font size and family.