同步 · dev.to / @markyu
Create a Heart Shaped Animation with CSS3
Introduction Creating a personalized love confession page can be a fun and heartfelt way...
- 发布日期
- May 22 '24
- 阅读时长
- 3 min read
- 点赞
- 9
Introduction
Creating 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.
Step-by-Step Guide
1. HTML Structure
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>2. CSS Styling
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(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;
}3. Detailed Explanation
To help you understand each part of the code, let's break it down:
HTML Structure:
- The
<!DOCTYPE html>declaration defines the document type as HTML5. - The
<html lang="en">tag sets the language of the document to English. - Inside the
<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%and100%: 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.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.heartcontainer.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.
Conclusion
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!
相关阅读
webdev
Quick Guide To 3D Transformations in CSS3 😎
Introduction Creating dynamic 3D scenes in web development can elevate your design, making...
database
The True Cost of Poor Data Quality: Why It Matters and How to Improve It
In today’s fast-paced, data-driven world, businesses have more access to data than ever before....
ipaddresses
How to Determine the Network Address from a Known IP Address
Ever wondered how devices communicate within a network? Or perhaps you've come across terms like "IP...
原文发布
本文首发于 dev.to，评论与点赞保留在原站。
在 dev.to 继续阅读