根据文字长度，设置文字滚动的速度

最新推荐文章于 2024-08-22 09:15:45 发布

小小程序员——Tracy

最新推荐文章于 2024-08-22 09:15:45 发布

阅读量383

点赞数

分类专栏：零碎文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_48702807/article/details/130132760

版权

零碎专栏收录该内容

18 篇文章 0 订阅

订阅专栏

该文章介绍了一个方法，根据文字长度用JavaScript计算CSS动画时间，以实现滚动文本效果。当文本长度超过80个字符时，会适当延长滚动时间，确保内容完整显示。核心技术涉及CSS的`@keyframes`和JavaScript的动态样式设置。

摘要由CSDN通过智能技术生成

    <div class="tips-box">
      <span class="scroll-text" v-html="conference.importantInfo"></span>
    </span>
    </div>

 // 根据文字长度设置中文滚动时间
      const animateTextlength = this.conference.importantInfo
        .toString()
        .replace('<span style="color:red;">', '')
        .replace('</span>', '')
        .trim().length;
      // 因为文字的大小是 18px, 所以这里是文字的数量 * 18, + 200 是为了多给点长度
      const animateTextWidth = '-' + (animateTextlength * 20 + 200) + 'px';
      document.body.style.setProperty('--animateTextlength', animateTextWidth);

      // 如果文字数量大于80个字，那么就延长滚动时间,基础滚动时间为23秒，超出每5个字增加一秒
      if (animateTextlength > 80) {
        const animateTime = 23 + Math.ceil((animateTextlength - 80) / 5) + 's';
        document.body.style.setProperty('--animateTime', animateTime);
      }


.tips-box
  color: rgba(63, 63, 63, 1)
  padding-bottom: 0
  line-height: 22px
  font-size: 18px
  overflow: hidden
  white-space: nowrap /// 禁止换行 */
  margin-right:50px
  .scroll-text
    display: inline-block // 内联块元素，实现横向排列 */
    animation: scroll-left var(--animateTime, 23s)  linear infinite // 指定动画名称、持续时间、速度和循环次数 */



@keyframes scroll-left
  0%
    transform: translateX(0) // 起点位置 */
  100%
    transform: translateX(var(--animateTextlength, -100%)) // 终点位置 */