在網站中，廣告是重要的推廣方式之一。一個好的廣告滾動動畫對于用戶來說是很有吸引力的。CSS可以幫助創造各種各樣的動畫效果，下面介紹幾種常見的CSS廣告滾動動畫效果。

/*1. 基礎的廣告滾動*/
.ad {
animation: ad-scroll 10s linear infinite;
}
@keyframes ad-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/*2. 可控制速度的廣告滾動*/
.ad {
animation: ad-scroll 20s linear infinite;
}
@keyframes ad-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/*讓廣告在中間停留1s*/
@keyframes ad-scroll {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-50%);
}
100% {
transform: translateX(-100%);
}
}
/*3. 縱向滾動的廣告*/
.ad {
animation: ad-scroll 10s linear infinite;
}
@keyframes ad-scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
/*4. 鼠標懸停停止廣告滾動*/
.ad {
animation: ad-scroll 10s linear infinite;
}
.ad:hover {
animation-play-state: paused;
}
@keyframes ad-scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}

總之，CSS在廣告滾動動畫方面提供了豐富的樣式和功能，無論是基礎的滾動還是高級的滾動，用戶總能找到合適的效果。但是記住，在使用CSS動畫時，要注意它們對性能的影響以及工作原理，這樣可以幫助避免出現問題。