源码
<div class="heart"></div>
<style>
.heart {
background-color: crimson;
display: inline-block;
width: 100px;
height: 100px;
position: relative;
top: 0;
transform: rotate(-45deg);
position: absolute;
left: 45%;
top: 45%;
animation: heartbeat 1.25s infinite
}
.heart::before,.heart::after {
content: "";
background-color: crimson;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
animation: pulsecolor 1.25s infinite
}
.heart::before {
top: -50px;
left: 0
}
.heart::after {
top: 0;
left: 50px
}
@keyframes heartbeat {
0% {
transform: scale(1) rotate(-45deg)
}
10% {
transform: scale(1.25) rotate(-45deg);
background-color: #EF395E
}
100% {
transform: scale(1) rotate(-45deg)
}
}
@keyframes pulsecolor {
10% {
background-color: #EF395E
}
}
</style>
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!