一、实现原理：
利用css的伪元素::before跟::after位移transform: translate()之后再border-radius: 50%实现
二、关键代码如下：
<div class="warp">
<div class="scale-box">
<div class="peach-heart"></div>
</div>
</div>.peach-heart {
width: 200px;
height: 200px;
background-color: pink;
}
.peach-heart::before {
display: block;
content: '';
width: 200px;
height: 200px;
background-color: pink;
transform: translate(-50%);
border-radius: 50%;
}
.peach-heart::after {
display: block;
content: '';
width: 200px;
height: 200px;
background-color: pink;
transform: translate(0%, -50%);
border-radius: 50%;
}最后再加上动画
.peach-heart {
animation: run 1s infinite ease-in-out;
}
@keyframes run {
0% {
transform: scale(1);
}
25% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1.2);
}
70% {
transform: scale(1);
}
80% {
transform: scale(1.4);
}
90% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}三、效果如图：
（带闪动的，只是不能弄gif的原因，接了两张静态图）
图一
图二
四、全部代码：
<!--
* @Description: ------ 文件描述 ------
* @Creater: snows_l [email protected]
* @Date: 2023-03-02 09:32:41
* @LastEditors: snows_l [email protected]
* @LastEditTime: 2023-03-19 14:53:03
* @FilePath: /css/桃心.html
-->
<!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, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
}
.warp {
position: relative;
width: 100%;
height: 100%;
}
.scale-box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 200px;
height: 200px;
transform: rotate(135deg);
}
.peach-heart {
width: 200px;
height: 200px;
background-color: pink;
animation: run 1s infinite ease-in-out;
}
.peach-heart::before {
display: block;
content: '';
width: 200px;
height: 200px;
background-color: pink;
transform: translate(-50%);
border-radius: 50%;
}
.peach-heart::after {
display: block;
content: '';
width: 200px;
height: 200px;
background-color: pink;
transform: translate(0%, -50%);
border-radius: 50%;
}
@keyframes run {
0% {
transform: scale(1);
}
25% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1.2);
}
70% {
transform: scale(1);
}
80% {
transform: scale(1.4);
}
90% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
</style>
</head>
<body>
<div class="warp">
<div class="scale-box">
<div class="peach-heart"></div>
</div>
</div>
</body>
</html>