CSS顏色變化跳動的方塊是一種非常酷炫的效果，它能夠讓網頁更加生動有趣。這種方塊通過使用CSS的動畫效果來實現，同時還利用了CSS的顏色漸變功能，讓方塊的顏色不斷變幻。

.color-block {
width: 100px;
height: 100px;
border-radius: 10px;
animation: jump 1s infinite;
background: linear-gradient(to bottom right, #FF4136, #2ECC40);
}
@keyframes jump {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}

首先，我們定義了一個名為.color-block的CSS類，里面包括了方塊的寬度、高度、邊框圓角、背景漸變以及動畫效果。其中，animation屬性用來指定動畫名稱、持續時間和執行次數。在這里，我們把動畫名稱設置為jump，持續時間設置為1秒，執行次數設置為無限循環。

接下來，我們定義了一個名為jump的動畫，里面包括了方塊在不同時間點的位置變化。在這里，我們將方塊向上移動了20像素，讓它看起來像是在跳動。需要注意的是，我們把變化范圍設置為50%，這樣可以讓方塊每次跳躍的高度不一樣。

最后，我們在HTML里面添加一個div元素，并且把它的class設置為.color-block即可。這樣，我們就可以看到一個漂亮的跳動著、變幻著顏色的方塊了。