CSS實(shí)現(xiàn)文字左右滾動(dòng)效果

在網(wǎng)頁(yè)設(shè)計(jì)中，使用CSS可以讓文字呈現(xiàn)出左右滾動(dòng)的動(dòng)態(tài)效果，這種效果通常用于吸引用戶的注意力或者展示一些重要的信息，下面是一種簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)文字的左右滾動(dòng)效果。

我們需要?jiǎng)?chuàng)建一個(gè)HTML元素來(lái)包含需要滾動(dòng)的文字，我們可以使用<div>元素來(lái)創(chuàng)建一個(gè)塊級(jí)元素，然后在這個(gè)塊級(jí)元素中包含需要滾動(dòng)的文字。

<div id="scroll-container">
  這是一段需要左右滾動(dòng)的文字。
</div>

我們需要使用CSS來(lái)設(shè)置這個(gè)塊級(jí)元素的樣式，包括寬度、高度、背景顏色等屬性，我們還需要使用CSS的動(dòng)畫屬性來(lái)設(shè)置文字的滾動(dòng)效果。

#scroll-container {
  width: 300px;
  height: 50px;
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
}
#scroll-container p {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { left: 100%; }
  100% { left: -100%; }
}

在這個(gè)CSS代碼中，我們使用了@keyframes規(guī)則來(lái)定義了一個(gè)名為scroll的動(dòng)畫，這個(gè)動(dòng)畫會(huì)在10秒的時(shí)間內(nèi)將文字從右向左滾動(dòng)，并且會(huì)無(wú)限重復(fù)，在#scroll-container p選擇器中，我們將文字的position屬性設(shè)置為absolute，并將其left屬性設(shè)置為0，以確保文字始終在容器的左側(cè)開始滾動(dòng)，我們還使用了text-align屬性來(lái)將文字居中顯示。