字幕/通知循环滚动样式

html

<div class="box">
  <div class="scrolling-notification">
    这是一条滚动的通知消息，内容很长，需要自动滚动显示。
  </div>
</div>

css

.box{
  position: relative;
  margin: 0 auto;
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc; /* 边框 */
  background-color: #f5f5f5; /* 背景颜色 */
  padding: 10px;       /* 内边距 */
}
.scrolling-notification {
  display: inline-block;
  white-space: nowrap; /* 不换行 */
  background-color: #fafa00; /* 背景颜色 */
}

/* 为了让文本滚动，我们需要添加一个动画 */
@keyframes scrollText {
  0% { transform: translateX(310px); }
  100% { transform: translateX(-100%); }
}

.scrolling-notification {
  animation: scrollText 10s linear infinite; /* 动画名称, 持续时间, 动画速度曲线, 是否无限循环 */
}