css怎么设置跳动的心 |css div 展开

/* 定义跳动的心形样式 */
.heart {
width: 50px;
height: 50px;
position: relative;
animation: beat 1s infinite;
transform: rotate(-45deg);
}
.heart::before,
.heart::after {
content: "";
width: inherit;
height: inherit;
border-radius: 50%;
position: absolute;
left: 0; 
}
.heart::before {
top: -25px;
background: red;
}
.heart::after {
top: 0;
left: 25px;
background: red;
}
/* 定义跳动的动画 */
@keyframes beat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}

上面的代码中，大家首先定义了一个heart类，表示这个元素是一个心形，并且设置了它的宽度、高度和位置。

然后，大家使用伪元素before和after来创建心型的顶部和底部，并设置它们的背景颜色为红色。最后，大家使用CSS3动画来定义这个心形的“跳动”效果。