長方形和心跳動畫是CSS中常用的兩種效果之一。在這篇文章中，我們將學習如何使用CSS創建這兩種效果并如何將它們應用在網頁中。

/* 創建一個紅色的長方形 */
.rectangle {
width: 200px;
height: 100px;
background-color: red;
}
/* 創建一個心臟形狀 */
.heart {
position: relative;
width: 100px;
height: 90px;
margin: 20px auto;
transform: rotate(-45deg);
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background-color: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
}
.heart:after {
left: 0;
border-radius: 0 0 50px 50px;
transform: rotate(45deg);
}

通過在HTML文檔中添加如下代碼，我們可以在網頁中呈現這兩種效果：

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

以上代碼將顯示一個200像素寬，100像素高的紅色長方形和一個心臟形狀，它們的顏色和大小可以根據你的需要進行調整。

接下來，我們來介紹一些如何通過動畫讓長方形和心臟形狀"跳動"的技巧。

/* 長方形心跳動畫 */
.rectangle {
animation: heartbeat 1.5s infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
100% {
transform: scale(1);
}
}
/* 心臟形狀跳動動畫 */
.heart {
animation: jump 1s infinite;
}
@keyframes jump {
0% {
transform: translate(0, 0);
}
20% {
transform: translate(0, -20px);
}
50% {
transform: translate(0, 0);
}
}

通過向以上代碼添加動畫屬性和關鍵幀，我們可以讓這兩種形狀像跳動的心臟一樣動起來。

如果你想要進一步了解HTML和CSS的知識，可以通過參考相應的教程和文檔進行學習。希望這篇文章能幫助你成功地創建和應用長方形和心跳動畫。