眾所周知，CSS在前端網頁開發中扮演了重要的角色，不僅可以實現樣式的美化，也可以做出許多有趣的動效。今天，我來和大家分享一款炫酷的CSS愛心動效。

首先，我們需要定義一個包含兩個心形的div容器，通過使用CSS的偽元素before和after來呈現兩個不同位置的愛心。下面是代碼：

div {
position: relative;
width: 70px;
height: 70px;
}
div:before {
content: "";
position: absolute;
top: -30px;
left: 35px;
width: 30px;
height: 30px;
border-radius: 15px 15px 0 0;
transform: rotate(-45deg);
background-color: red;
}
div:after {
content: "";
position: absolute;
top: -30px;
left: 5px;
width: 30px;
height: 30px;
border-radius: 15px 15px 0 0;
transform: rotate(45deg);
background-color: red;
}

接著，我們需要添加動畫效果。這里采用了CSS3的動畫屬性，通過將愛心旋轉、放大、縮小等操作實現動態效果，使其更加逼真。下面是代碼：

div:hover:before {
animation: heartbeat 1.1s ease-in-out infinite both;
}
div:hover:after {
animation: heartbeat 1.4s ease-in-out infinite both;
}
@keyframes heartbeat {
from {
transform: scale(0.75);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.75);
}
60% {
transform: scale(1);
}
80% {
transform: scale(0.75);
}
to {
transform: scale(0.75);
}
}

最后，我們就可以在網頁上看到這個炫酷的愛心動效啦！

總的來說，這個動效相對來說比較簡單，但是也需要對CSS比較熟練才能夠達到如此的效果。相信大家可以更多地發揮想象力，創造自己的動態效果。