css 动画无限滚动

1. 创建一个外层容器（loop-wrap）和一个包含CSS标签的容器（loop）。
2. CSS标签使用tag类样式化，并带有文本"# CSS"。
3. 使用@keyframes loop动画规则来实现标签的水平滚动效果。动画从初始位置滚动到左边50%的位置，并持续3秒后无限循环。
4. 通过将fade类应用于一个空白的div，在loop-wrap容器上创建了一个渐变覆盖效果，这使得标签在滚动的起始和结束位置逐渐淡出。

因此，当您在浏览器中运行该代码时，您将会看到一行CSS标签不断地从右向左滚动，并在起始和结束位置呈现淡出效果。动画效果的持续时间为3秒，然后无限循环滚动，直到页面被关闭或动画效果被停止。这种动画效果通常用于网页设计中的元素展示或广告横幅等场景。

html

<div class="loop-wrap">
      <div class="loop">
        <div class="tag"><span>#</span>CSS</div>
        <div class="tag"><span>#</span>CSS</div>
        <div class="tag"><span>#</span>CSS</div>
        <div class="tag"><span>#</span>CSS</div>
        <div class="tag"><span>#</span>CSS</div>
        <div class="tag"><span>#</span>CSS</div>
        <div class="tag"><span>#</span>CSS</div>
        <div class="tag"><span>#</span>CSS</div>
      </div>
      <div class="fade"></div>
  </div>

css

.loop-wrap{
      width: 30rem;
      display: flex;
      flex-wrap: wrap;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }
    .loop{
      display: flex;
      width: fit-content;
      animation-name: loop;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: normal;
      animation-duration: 3s;
    }
    .tag{
      display: flex;
      align-items: center;
      gap: 0 0.2rem;
      color: #ccc;
      background: #334155;
      border-radius: 0.4rem;
      padding: 0.7rem 1rem;
      margin-right: 1rem;
      height: 40px;
      box-shadow: 0 0.1rem 0.2rem rgb(0, 0, 0/20%),0 0.1rem 0.5rem rgb(0, 0, 0 / 30%),0 0.2rem 1.5rem rgb(0, 0, 0/40%);
    }
    .tag span{
      font-size: 1.2rem;
      color: #64748b;
    }
    .fade{
      pointer-events: none;
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,#121212,transparent 30%,transparent 70%,#121212);
    }
    @keyframes loop {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }