標簽來實現。然后，在CSS樣式表中，給這個容器設置overflow屬性為hidden，這樣就能夠隱藏多余的消息。
接下來，在CSS中給消息容器設置animation屬性，設置消息滾動的動畫效果。例如，我們可以設置一個水平向左滾動的動畫效果：

CSS
.message-container {
overflow: hidden;
animation: moveLeft 10s linear infinite;
}
@keyframes moveLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}

在上面的代碼中，我們給消息容器設置了一個名為moveLeft的動畫效果，將transform屬性設置為從當前位置水平向左移動了100%的位置。同時還設置了動畫時間為10秒，并且讓動畫一直循環滾動。
最后，我們將消息內容放置在消息容器中，使其能夠顯示在容器內。如果要將多條消息按照時間順序依次滾動顯示，我們可以通過JavaScript動態地向消息容器中添加內容。
下面是一個完整的示例代碼：

HTML
<div class="message-container">
<p class="message">這是第一條消息</p>
</div>
<script>
const messages = ["這是第一條消息", "這是第二條消息", "這是第三條消息"];
const interval = 3000; //間隔3秒滾動一次
let index = 1;
setInterval(() => {
document.querySelector('.message-container').innerHTML =
<p class="message">${messages[index]}</p>
;
index = (index + 1) % messages.length;
}, interval);
</script>
<style>
.message-container {
width: 300px;
height: 50px;
overflow: hidden;
border: 1px solid #ccc;
box-sizing: border-box;
animation: moveLeft 10s linear infinite;
}
.message {
font-size: 16px;
}
@keyframes moveLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>

以上便是CSS如何實現消息滾動的方法，希望能對您有所幫助。