CSS特效展示可以讓網站更具有視覺沖擊力，提高用戶體驗。下面我們來看幾個常用的CSS特效。

/* 文字漸變動畫 */
@keyframes gradient {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
p.gradient {
background-image: linear-gradient(to right, #C4E0E5, #C4E0E5);
background-repeat: no-repeat;
background-size: auto auto;
color: transparent;
animation: gradient 8s linear infinite;
}
/* 圖片縮放動畫 */
img.zoom {
transition: transform .3s ease-in-out;
}
img.zoom:hover {
transform: scale(1.2);
}

上面的代碼演示了一個文字漸變動畫和一個圖片縮放動畫。文字漸變動畫使用了漸變背景和動畫。圖片縮放動畫使用了鼠標懸停和過渡效果，使得圖片看起來有生命力。

除了上面的特效，還有很多其他的常見特效，如下拉菜單、滾動動畫等。

/* 下拉菜單特效 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* 滾動動畫 */
@keyframes roll {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
img.roll {
animation: roll 4s linear infinite;
}

上面的代碼演示了一個下拉菜單特效和一個滾動動畫。下拉菜單特效使用了偽元素和懸停效果，使得用戶可以方便地查看菜單列表。滾動動畫使用了關鍵幀動畫，使得圖片可以不斷旋轉，增加了視覺吸引力。

總之，CSS特效展示是網站設計中不可或缺的一部分，合理使用可以讓網站更加生動、有趣。