css 文字滚动跑马灯效果

效果 gif

css 文字滚动跑马灯效果.gif

截取主要的代码部分

<div class="algorithm-title" :class="{ 'algorithm-title-long': item.algorithmName.length > 7 }">
  <div class="algorithm-icon">
    <img :src="item.iconUri" alt="图标" />
  </div>
  <div class="algorithm-name">
    {{ item.algorithmName }}
  </div>
  <div class="algorithm-name-scroll">
    <span>{{ item.algorithmName }}</span>
  </div>
</div>

@keyframes textScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% + 6.3em));
  }
}

@-webkit-keyframes textScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% + 6.3em));
  }
}

.algorithm-title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
  .algorithm-icon {
    width: 40px;
    height: 40px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .algorithm-name {
    font-size: 24px;
    font-weight: 600;
    color: rgba(32, 43, 61, 1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    max-width: 7em;
    &-scroll {
      display: none;
      font-size: 24px;
      font-weight: 600;
      color: rgba(32, 43, 61, 1);
      overflow: hidden;
      white-space: nowrap;
      max-width: 7em;
    }
  }
  &-long {
    &:hover {
      .algorithm-name {
        display: none;
        &-scroll {
          display: flex;
          span {
            animation: textScroll 3s linear;
          }
        }
      }
    }
  }
}