技術標籤：Htmlhtmlcssjscss3unity

1、程式碼

<div class="warning">
	<div class="text">這是一個滾動字幕這是一個滾動字幕這是一個滾動字幕這是一個滾動字幕這是一個滾動字幕。</div>
</div>

.warning {
  display: inline-block;
  width: 600px;
  height: 32x;
  border-radius: 32px;
  position: absolute;
  margin-left
 
: 200px;
  overflow: hidden;

  .text {
    color: #999;
    font-size: 18px;
    line-height: 32px;
    display: inline-block;
    white-space: nowrap;
    animation: 20s wordsLoop linear infinite normal;
  }
  @keyframes wordsLoop {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform
 
: translateX(-100%);
    }
  }
}

2、效果