There’s always something to guide you, like a nice little effect.

Make a little love for someone you like today.

So what does a heart consist of?

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

A heart is made up of a diamond and two semicircles.

    .heart{// center the box vertically and horizontallyposition: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: pink;
            height: 50px;
            width: 50px; // Rotate the square into a diamondtransform: rotate(-45deg);            
        }
Copy the code
<div class="heart"></div>
Copy the code

In order for the heart to be placed properly, the box must be vertically centered.

So now I have two semicircles left, so semicircles are hard to draw, but a circle is easy to draw.

So how do you link these three parts together?

You can use CSS pseudo-elements :after and :before

Definitions and Usage

The :after pseudo-element adds content after the element.

The :before selector inserts content before the content of the selected element.

        .heart:after {
            background-color: pink;
            content: ""; // Use the required attributes of the pseudo-element to write the values you want to displayborder-radius: 50%; // Set the rounded border,50%For the roundposition: absolute;
            width: 50px;
            height: 50px;
            top: 0px; 
            left: 25px;
        }

        .heart:before {
            background-color: pink;
            content: "";
            border-radius: 50%;
            position: absolute;
            width: 50px;
            height: 50px;
            top: -25px;
            left: 0px;
        }
Copy the code

When setting up pseudo-elements, if it is not clear how many attributes are defined, try it in the browser console

Now that the pattern is complete, it’s time to get the heart pumping.

More details can be consulted

www.w3school.com.cn/css/css3_an…

        @keyframes beat {
            0% {
                transform: scale(1) rotate(-45deg);
            }

            50% {
                transform: scale(0.6) rotate(-45deg); }}Copy the code

The transform property applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements.

scale(x.y) Define 2D scale transformations.
rotate(angle) Define 2D rotation, specifying angles in parameters.

So the complete code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, "> <title>jumpHeart</title> <link rel="stylesheet" href="./ CSS /common.css"> <style>. 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; } .heart:before { background-color: pink; content: ""; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: -25px; left: 0px; } @keyframes beat { 0% { transform: scale(1) rotate(-45deg); Transform: scale(0.6) rotate(-45deg); } } </style> </head> <body> <div class="heart"></div> </body> </html>Copy the code

Also, to make the effect more beautiful, add a color to the background

        body {
            background: #e74c3c;
            animation: bg-color 30s infinite;
            overflow-x: hidden;
            overflow-x: hidden;
        }

        @keyframes bg-color {
            0% {
                background-color: #e74c3c;
            }

            20% {
                background-color: #f1c40f;
            }

            40% {
                background-color: #1abc9c;
            }

            60% {
                background-color: #3498db;
            }

            80% {
                background-color: #9b59b6;
            }

            100% {
                background-color: #e74c3c; }}Copy the code

Write more, if the animation of this play understand, that beautiful effect is not easy?