廣告對于企業的營銷推廣非常重要，如何設計一款時尚、吸引眼球的廣告？今天，我們將介紹一款基于純 CSS 的廣告條滾動效果。

.advertisement {
position: relative;
overflow: hidden;
height: 60px;
}
.advertisement ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
}
.advertisement ul li {
float: left;
}
.advertisement ul li a {
display: block;
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
color: #ffffff;
background-color: #e74c3c;
text-decoration: none;
margin-right: 10px;
}
.advertisement ul li:last-child a {
margin-right: 0;
}
@keyframes ad-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-210px);
}
}
.advertisement ul li a:nth-child(2) {
animation: ad-scroll 5s ease-in-out infinite;
}

首先，我們給廣告容器設置了相對定位和隱藏溢出。然后，我們將列表項設置為絕對定位，以允許滾動。 這時，我們將列表項中的每個廣告鏈接浮動到左側，使它們成為一排。接下來，我們將實際廣告鏈接的尺寸應用到鏈接元素中，同時為了讓它們之間保持一定距離，我們在最后一個鏈接上移除了右邊距。

接著，我們編寫了一個關鍵幀動畫——ad-scroll——用于產生滾動效果。這個動畫在初始狀態下，將廣告鏈接容器向左移動 0 像素，并在結束幀時將其移動到寬度位移的負值：我們的鏈接容器是 200 像素寬，再加上最后一個鏈接的 10 外邊距(200+10)，為了在下次動畫循環開始之前在視圖中再次出現，我們需要將相對于初始位置左偏移移動至 210 像素。

為了使滾動效果順暢，我們將動畫持續時間設置為 5 秒，并使用 ease-in-out 緩動函數，使開始和結束時平滑過渡到下一次動畫。 最后，我們選擇使用:nth-child() 偽選擇器，將動畫應用于第二個鏈接。因為 animatable（可動畫的）屬性被定義在 CSS 動效模塊的規范中，因此， animated 屬性只能應用于可動畫的屬性。 為了確保無限循環，我們將動畫聲明為無限的。

結論：使用純 CSS 來創建廣告條滾動效果非常方便，具有可維護性和性能。通過使用關鍵幀動畫和nth-child 選擇器的組合，可以使廣告條平滑地滾動。