CSS動畫效果可以使網站頁面更具有吸引力和趣味性。其中心形動畫效果是一個非常受歡迎的動畫效果，可以讓網站更加生動有趣。

<div class="heart"></div>
<br>
<style>
.heart{
position:relative;
width: 20px;
height: 20px;
margin:50px auto;
transform:translateZ(0);
}
.heart:before,
.heart:after{
position:absolute;
content:"";
left:10px;
top:0;
width:10px;
height:16px;
background: #fc2a6f;
border-radius: 10px 10px 0 0;
transform:rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after{
left:0;
transform:rotate(45deg);
transform-origin:100% 100%;
}
animation-name: beat;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
@keyframes beat{
0%,100%{
transform: scale(1);
}
50%{
transform: scale(1.2);
}
}
</style>

以上是心形動畫的CSS代碼。首先定義了一個class為“heart”的div，之后選中div中的before和after偽元素，分別作為紅色心形的兩個部分，定義了其樣式和位置。之后對心形進行縮放動畫，用transform: scale實現，讓心形有跳動的效果。最后用@keyframes定義beat動畫序列，讓動畫反復播放。

使用CSS心形動畫效果，可以讓網站更加有趣和生動，提升用戶體驗。在實際應用中，可以根據實際需要對動畫的持續時間、縮放比例等進行調整。