CSS3實現(xiàn)文字滾動效果的方法

在CSS3中，我們可以使用@keyframes規(guī)則來創(chuàng)建動畫，從而實現(xiàn)文字滾動的效果，以下是一個簡單的示例：

1、HTML結(jié)構(gòu)：

<div class="scroll-text">
  你的文字內(nèi)容
</div>

2、CSS樣式：

.scroll-text {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #000;
}

3、CSS動畫：

@keyframes scroll-text {
  0% { left: 100%; }
  100% { left: -100%; }
}

4、應(yīng)用動畫：

.scroll-text {
  animation: scroll-text 5s linear infinite;
}

在這個示例中，我們創(chuàng)建了一個名為scroll-text的動畫，該動畫將文本內(nèi)容從右側(cè)滾動到左側(cè)，通過@keyframes規(guī)則，我們定義了動畫的關(guān)鍵幀，其中0%表示文本內(nèi)容在動畫開始時位于容器的右側(cè)，100%表示文本內(nèi)容在動畫結(jié)束時位于容器的左側(cè)，我們將該動畫應(yīng)用到.scroll-text元素上，設(shè)置動畫的持續(xù)時間為5秒，線性速度曲線，以及無限循環(huán)。