Simulate the effect of a heart beating every second

This time I will bring you the effect of simulating a heart beating one second. What are the precautions of simulating the effect of a heart beating one second? The following is a practical case, let’s take a look.

Without further ado, I will post the code directly for you. The specific code is as follows:

nbsp;html>


    <meta>
    <meta>
    <title>模拟心的跳动</title>

<style>
    * {
    margin: 0;
    padding: 0;
}
body {
    background-color: #D4CECE;
}
.big {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
    animation: heartAnimation 0.7s linear 0s infinite;
}
.big #heart {
    margin: 5px 0;
    width: 100%;
    height: 100%;
    background-color: #FF0606;
    position: absolute;
}
.left,.right {
    border-radius: 100px 100px 0 0;  /*左上 右上 右下 左下*/
    box-shadow: 0px 0px 20px #FD0707;
}
.bottom {
    box-shadow: 0px 0px 20px #FD0707;
}
.left {
    transform: translate(-50px,150px) rotate(-45deg);  /*translate()位移 rotate() 旋转角度*/
}
.right {
    transform: translate(50px,150px) rotate(45deg);
}
.bottom {
    transform: translate(0,214px) rotate(45deg) scale(.9,.9)  /*scale:定义 2D 缩放转换。*/
}
/*动画效果*/
@keyframes heartAnimation{
    form {
            transform: scale(0.9,0.9);
    }
    to {
            transform: scale(1.1,1.1);
    }
}
</style>

    <p>
        </p><p></p>
        <p></p>
        <p></p>
    

I believe I have read it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of pointer-events in css3

Completely use CSS to center elements

Detailed explanation of the use of focus-within

The above is the detailed content of Simulate the effect of a heart beating every second. For more information, please follow other related articles on the PHP Chinese website!