在網頁設計中，icon以及各種小圖標的運用越來越重要。而心形圖標更作為愛情和浪漫的代表，在情人節或者婚慶等紀念日設計中也特別常見。下面我將教大家使用CSS來實現一個簡單的心形圖標。

.heart {
contain: content;
width: 16px;
height: 16px;
padding: 0;
margin: 0;
position: relative;
animation: heartbeat 1s linear infinite;
}
.heart::before,
.heart::after {
position: absolute;
content: "";
left: 7px;
top: 0;
width: 5px;
height: 14px;
background: #fc2b58;
border-radius: 5px 5px 0 0;
}
.heart::before {
transform: rotate(-45deg);
}
.heart::after {
transform: rotate(45deg);
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

以上代碼中，我們使用了:before和:after兩個偽元素來構造整個心形圖標的形狀。通過CSS的rotate屬性來將之分別旋轉45度和-45度，再通過border-radius屬性設置圓角，最終達成心形的模樣。

接著，我們給整個.icon元素添加了一個動畫，用來模擬心跳的效果，體現出心形圖標所代表的浪漫和溫馨。

最后，附上在HTML中使用的示例代碼：

<div class="heart"></div>

將它放在你的個人網頁或者情人節設計中，驚喜你的訪客吧！