Home > Article > Web Front-end > 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:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>模拟心的跳动</title> </head> <style type="text/css"> * { 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> <body> <p class="big"> <p id="heart" class="left"></p> <p id="heart" class="right"></p> <p id="heart" class="bottom"></p> </p> </body> </html>
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!