CSS跳頁效果是指在網頁中滾動時，頁面發生跳躍的效果。這種效果可以增加用戶體驗，也可以使網頁顯得更加生動和有趣。接下來我們來介紹一些實現跳頁效果的CSS代碼。

/* 第一種方式：滾動條跳頁 */
body {
height: 2000px;
}
html {
scroll-behavior: smooth;
}
/* 第二種方式：點擊跳頁 */
a {
display: block;
padding: 10px;
margin-bottom: 20px;
background-color: #ccc;
color: #000;
text-align: center;
}
a:hover {
background-color: #000;
color: #fff;
}
/* 定義跳躍效果 */
.jump {
animation: jump 0.5s ease;
}
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}

第一種方式實現滾動條跳頁，需要設置body的高度，并在html中設置scroll-behavior為smooth。這樣當用戶滾動頁面時，頁面會平滑地滾動而不是直接跳躍。

第二種方式實現點擊跳頁，需要將跳轉鏈接設置為塊級元素，并添加動畫效果。在CSS中，我們使用@keyframes規則定義jump動畫。在0%、50%和100%位置，分別為元素設置不同的偏移量，從而實現跳躍效果。