CSS心形填充動畫是非常可愛和有趣的，可以讓你的網站更加生動活潑。下面我們就來介紹CSS心形填充動畫的實現方法。

.heart {
position: relative;
width: 100px;
height: 100px;
background: #fff;
transform: rotate(-45deg);
overflow: hidden;
cursor: pointer;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
width: 50px;
height: 80px;
background: #fc2d79;
border-radius: 50px 50px 0 0;
transform: translate(-25px, 0) rotate(-45deg);
}
.heart:before {
top: 0;
}
.heart:after {
left: 0;
transform: translate(25px, 0) rotate(-45deg);
}
.heart:hover:before,
.heart:hover:after {
animation: beat 1s ease-out;
animation-fill-mode: forwards;
}
@keyframes beat {
50% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}

上面是實現CSS心形填充動畫的代碼。其中利用偽元素before和after來構造出心形，并設置動畫的效果。

通過將鼠標移至心形圖案上，你可以看到心形開始發生跳動效果。這就是利用CSS動畫實現的結果。

總之，CSS心形填充動畫是一種非常簡單實用的動畫方式，而且不需要使用JavaScript就能實現。如果你想讓你的網站更有趣，就可以嘗試一個吧！