CSS 選取框
CSS 選取框正在取代 HTML 選取框作為創建滾動、彈跳或滑入文本和圖像的標準方法。
CSS 選取框可以使用 CSS 動畫創建，這使它們符合標準。 使用 <marquee> 元素的舊 HTML 方法不符合標準，
因為該元素不是 W3C HTML 規範的一部分。
要創建 CSS 選取框，我們可以使用 animation 屬性和 @keyframes 規則來創建動畫。
此頁面上的示例使用 translateX() 和 translateY() 來指定滾動元素的路徑。 您還可以使用邊距創建 css 選取框。
滾動文本
這裡我們使用 translateX() 來確定文本在動畫開始和結束時的位置。 然後隨著動畫的進行，它會在這兩個點之間移動。
滑入式文本
您可以通過刪除無窮大並將結束 translateX() 值設置為零或正值來創建滑入文本。
在這裡，我們還使文本在停止之前逐漸變慢。 我們將線性更改為緩出。 您可能需要刷新此頁面才能看到滑入效果（或查看飛入文本）。
左到右
要使選取框向相反方向滾動，請更改 translateX() 值。 例如，要從左到右滾動，請將 100% 與 -100% 交換，反之亦然。
垂直滾動
要垂直滾動，您可以使用 translateY() 而不是 translateX()。
在這裡，我增加了外框的高度，以便為元素滾動騰出一些空間。
彈跳文本
要創建彈跳文本，請將替代添加到動畫屬性的末尾。 此外，修改 translateX() 值，以便文本不會跳出視線（除非這是您的意圖）。
我已經改變了 text-align:center; 文本對齊：左； 這樣文本就可以從左邊穿過。 請注意，我也刪除了起始位置的代碼，儘管這是可選的。
替代滾動屬性
在上面的例子中，我們通過改變 translateX() 和 translateY() 函數的值來移動文本。
我們可以同樣輕鬆地使用其他 CSS 屬性來使元素滾動。 例如，我們可以使用邊距。
我們還可以使用諸如 left 和 top 之類的屬性來垂直或水平移動元素。 水平移動的另一個選項是文本縮進。
瀏覽器兼容性
此頁面使用瀏覽器前綴以實現最大的瀏覽器兼容性。 對於完全符合標準的代碼，刪除帶有瀏覽器前綴的聲明（但請注意，
這樣做可能會降低瀏覽器兼容性）。 瀏覽器前綴是包含 -webkit- 和 -moz- 的聲明。