CSS3 的出現為我們的網頁設計添加了更多的靈活性和美感，并且可以幫助我們輕松實現各種效果，如今我們就來教大家如何使用 CSS3 實現箭頭滾動效果。

.arrow-scroll {
overflow: hidden;
white-space: nowrap;
}
.arrow-scroll span {
display: inline-block;
width: 100%;
animation: arrow-scroll 3s infinite linear;
}
.arrow-scroll span:before {
content: '→';
padding-right: 10px;
}
@keyframes arrow-scroll {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}

首先，我們需要一個容器及其樣式 .arrow-scroll，將其設為 overflow:hidden 并去掉默認的斷行線 white-space: nowrap。

其次，我們需要一個放置文本的 span 標簽及其樣式，將其設為行內元素并設置動畫，這個動畫我們要使用 @keyframes 定義。我們將文本以及箭頭作為 span 標簽的 before 偽元素的內容，在 before 元素上添加 padding-right 以保證箭頭位置正常。

最后，在 @keyframes 中添加兩個狀態，分別是從左到右和從右到左的狀態，將 transform 屬性設為 translateX(-100%) 和 translateX(100%) 實現滾動效果，將 animation-duration 設為3秒，并設置 calculation mode 為 infinite 和 animation timing-function 為 linear 實現循環和勻速效果。

通過以上樣式的設定，我們成功的實現了箭頭滾動效果，我們可以將文本內容放到 span 標簽內或是通過其他的方式添加文本，最終的效果將像這樣：

<div class="arrow-scroll">
<span>這是一段文本會無限滾動，并且帶著箭頭 </span>
</div>

效果如下：