Heart shape is a very popular shape, in this article we will use pure css to draw heart shape, and then use css animation to achieve the effect of heart.
Prior to this, we must understand the role of pseudo-elements :: after and :: before to ::before create a pseudo-element that will become the first child element that matches the selected element. Often, content attributes are used to add decorative content to an element.
In the following example, the: before pseudo-class element is used to add a square to the element whose class is heart.
.heart:before {
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}: before and: after must be used with content, this attribute is usually used to add content such as pictures or text to the element. When the: before and: after pseudo-classes are used to add certain shapes instead of pictures or text, content is still Required, but its value can be an empty string.
In the above example, the class is the heart element: the before pseudo class adds a yellow rectangle, the height and width of the rectangle are 50px and 70px respectively. Since the border radius is set to 25%, the rectangle is a rounded rectangle, The relative position is 5px from the left and 50px offset from the top.
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform :rotate(-45deg);
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
content:'' ;
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
Here we have realized the need to draw the heart, and the rest is to set the animation effect of the heart.
First, simply review the knowledge points related to animation.
If you want to add animation to an element, we need to understand the animation property and the @keyframes rule. The animation property is used to control the appearance of the animation, and the @keyframes rule controls the changes in each stage of the animation. There are a total of 8 animation properties.
| Attributes | significance | |
| animation-name | Set animation name | |
| animation-duration | The time it takes for the animation to execute (can be a decimal, but it must be a positive number), for example animation-duration: 1s | |
| animation-delay | After the page opens, how long does the animation start to execute, for example, animation-delay: 3s; | |
| animation-timing-mode (state at the end of the run) | forwards | Stop at the last frame after the animation |
| backforwards | Return to the first frame after the animation | |
| animation-iterator-count | num (1,2,3 ....) | The number of times the animation runs |
| infinite | Animation has been looping back and forth | |
| animation-direction (running direction) | alternate | Alternate running |
| reverse | Run in reverse | |
| alternate-revers | Play backwards and then play back | |
| animation-play-state | running | The current animation is running |
| pause | The current animation can be stopped | |
| animation-timing-function (draw the rhythm performed in each animation cycle) | ease | Slow-fast-very slow |
| linear | Uniform speed | |
| ease-in | Slow first | |
| ease-out | Fast first then slow | |
| ease-in-out | Slow-fast-slow | |
@keyframes can create animations. The principle of creating animation is to gradually change one set of CSS styles to another. Specifically, by setting the CSS properties of the corresponding "frames" during the animation, the change time is specified in percentage, or the keywords "from" and "to" are equivalent to 0% and 100%. For example, the 0% property in CSS is like the opening scene in a movie. The 100% attribute in CSS is the final look of the element, which is equivalent to the cast or credit shot in the movie. CSS adds effects to element transitions in the corresponding time. The following example illustrates the usage of @keyframes and animation properties:
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}The element whose id is anim, the code sets the animation-name to colorful, and sets the animation-duration to 3 seconds. Then reference @keyframes to the animation property named colorful. colorful sets the color to blue at the beginning of the animation (0%) and yellow at the end of the animation (100%) Note that not only the start and end transitions can be set, you can set any percentage between 0% and 100%.
Every second of the heartbeat animation contains two parts. heartElements (including :beforeand :after) use transformattributes to change their size, and background divuses backgroundattributes to change their color.
Each second of the heartbeat animation contains two parts.The heart element (including: before and: after) uses the transform attribute to change its size, and the background div uses the background-color attribute to change its color.
Set the style of each box:
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count:infinite;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count:infinite;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
animation-iteration-count:infinite;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}Add animation:
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}html part:
<div class="back"></div>
<div class="heart"></div>The final effect is as follows:
