Teach you step by step how to use CSS to create a simple heartbeat effect (detailed code explanation)

In the previous article "Teach you step by step how to use css3 to add animation effects to text (with code)", I introduced how to use css3 to add animation effects to text. This article will introduce to you how to use CSS to create a simple heartbeat effect. Let’s see how to do it together.

ccs method to create a simple heartbeat effect, just add a box and make full use of ccs to display it.

1. First, we add a visual box to the page, create a new document, and write code using <div class="heart"></div> The code is in the frame <div> tag. <p>Code example</p><pre class="brush:php;toolbar:false"> &lt;body&gt; &lt;div class=&quot;heart&quot;&gt;&lt;/div&gt; &lt;/body&gt;</pre><p> Html code completed. </p> <p>2. Turn it into a heart first, use <code>css to set the animation and font style, and use the heart attribute to bind the animation to the div element. Here is how to write the code, use Add <style type></style> between the head tags and then enter *, li, aThe distance between the outer border of the text and the element is 0, default value, remove underline, code example.

*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}

3. Next, use the head tag to add the heart string of code and then enter the relative positioning of the text in the style tag. The width, height, and margin attributes can have values ​​from 1 to 4, transition animation, code example

*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}
 
.heart{
position:relative;
width:100px; 
height:100px;
margin:100px;
animation:scale 1s linear infinite;  
/*名称 1s 匀速 无限循环*/

4, and finally set the animationanimation, here I want to say that animation must be used together with @keyframes, continue to use head between tags and enter in the style tag Absolute positioning, width, height, color, content attribute, outer border rounded corner, rotated element, code example

.heart:after,
.heart:before{
position:absolute;
width:70px;
height:100%;
background-color:red;
content:"";
border-radius:50% 50% 0 0;
}
.heart:before{
left:0;
transform:rotate(-52deg);
}
.heart:after{
right:0;
transform:rotate(49deg);

Code effect

5. We let it scale twice horizontally and vertically

Code example

@keyframes scale{ /*动画帧*/ 50%{transform:scale(2)} }

Code effect

The effect is out, and it's interesting. Friends who want to be beautiful can modify it themselves. After all, aesthetic skills are limited, and it is difficult for everyone to agree on the aesthetics. After all, I can't be recognized by everyone, so I can only work hard to perfect the work as much as possible.

【End】

Recommended learning: CSS3 video tutorial