如何使用 CSS 創造一個跳動的豎條？下面是一個簡單的示例：

.bar {
width: 10px;
height: 50px;
background-color: #333;
position: relative;
animation: jump 1s infinite ease-in-out;
}
@keyframes jump {
0% {
top: 0;
}
50% {
top: 20px;
}
100% {
top: 0;
}
}

首先，我們創建一個 div 元素來表示豎條。給它一個固定的寬度和高度，以及一個黑色的背景顏色。然后，我們將它的 position 屬性設置為 relative，這意味著我們可以在其中創建一個動畫，并使用 top 屬性來改變元素的垂直位置。

下一步是創建一個 keyframes 動畫來使用 top 屬性跳動元素。這個跳動動畫被命名為 jump，并在 .bar 元素上使用了 animation 屬性。這個屬性告訴瀏覽器在 1 秒鐘內無限次地應用 jump 動畫，并使用 ease-in-out 緩動函數來平滑過渡。

在 jump 動畫中，我們定義了三個關鍵幀，即 0%、50% 和 100%。這些關鍵幀指定了 .bar 元素將如何跳動。當動畫開始時（0%），我們將 .bar 元素的 top 屬性設置為 0（即它最初的位置）。當動畫進行到一半（50%）時，我們將它的 top 屬性設置為 20 像素。最后，當動畫結束時（100%），我們將 .bar 元素的 top 屬性再次設置為 0（這意味著我們回到了最初的位置）。

這樣，我們就使用 CSS 創建了一個簡單的跳動豎條動畫。