CSS实现文字上下滚动、间歇滚动和无限滚动

本文主要记录了如何实现文字上下滚动效果，实现主要就是用到了css3的两个属性： @framekeys和 animation

1、连续滚动

<div class="scroll-continuous">
	<div class="content">
	     <div class="item">1-12345dfgdfgdg6</div>
	     <div class="item">2-阿萨达dfgdfgdfgdfgdfgdfg</div>
	     <div class="item">3-aksfhaksfkasfh</div>
	     <div class="item">4-撒发顺丰大叔大叔大叔的</div>
	     <div class="item">5-撒打算大的撒十大啊大大撒是的啊大叔的a s s d</div>
 	</div>
</div>

<style>
.scroll-continuous {
  position: relative;
  width: 250px;
  height: 40px;
  overflow: hidden;
  border: 1px solid #4d0074;
}
@keyframes rowup {
   0% {
     transform: translateY(0);
   }
   25% {
     transform: translateY(-20px);
   }
   50% {
     transform: translateY(-40px);
   }
   75% {
     transform: translateY(-60px);
   }
   100% {
     transform: translateY(-80px);
   }
 }
.content {
   width: 100%;
   height: 100%;
   padding: 10px 0;
   animation: 10s rowup linear infinite normal;
 }
 .item {
   height: 20px;
   line-height: 20px;
   padding-left: 5px;
   color: #4d0074;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-all;
   white-space: nowrap;
 }
</style>

2、间歇性向上滚动

实现其实和连续滚动原理差不多，只不过加上了停留的动画贞配置。

<div class="scroll-intermittent">
	<div class="content">
		<div class="item">1-12345dfgdfgdg6</div>
		<div class="item">2-阿萨达dfgdfgdfgdfgdfgdfg</div>
		<div class="item">3-aksfhaksfkasfh</div>
		<div class="item">4-撒发顺丰大叔大叔大叔的</div>
		<div class="item">5-撒打算大的撒十大啊大大撒是的啊大叔的a s s d</div>
	</div>
</div>

<style>
.scroll-intermittent {
  width: 250px;
  height: 20px;
  overflow: hidden;
  border: 1px solid #4d0074;
}

@keyframes moveup {
  0% {
    transform: translateY(0px);
  }
  19% {
    transform: translateY(0px);
  }
  /* 两贞使用相同的偏移，达成停下展示效果，展示时长=两贞百分比差x总动画时差，即：19%x10s=1.9s */
  20% {
    transform: translateY(-20px);
  }
  39% {
    transform: translateY(-20px);
  }
  40% {
    transform: translateY(-40px);
  }
  59% {
    transform: translateY(-40px);
  }
  60% {
    transform: translateY(-60px);
  }
  79% {
    transform: translateY(-60px);
  }
  80% {
    transform: translateY(-80px);
  }
  99% {
    transform: translateY(-80px);
  }
  100% {
    transform: translateY(-100px);
  }
}
.content {
  animation: 10s moveup linear infinite normal;
}
.item {
  height: 20px;
  line-height: 20px;
  padding-left: 5px;
  color: #4d0074;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}
</style>

3、任意个数向上滚动

在上述实现的间歇性滚动中，有一个限制就是滚动的条数是有限制的，比较从样式表的配置就可以看到写法比较固定，如果要实现任意个数翻滚，那么就需要借助js进行动态修改animation.

基于vue3实现如下：

<template>
  <div class="scroll-wrap">
    <div class="content" ref="contentRef">
      <div v-for="item in scrollList" :key="item.id" class="item">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

const scrollList = [
  { text: "1-12345dfgdfgdg6", id: 1 },
  { text: "2-阿萨达dfgdfgdfgdfgdfgdfg", id: 2 },
  { text: "3-aksfhaksfkasfh", id: 3 },
  { text: "4-撒发顺丰大叔大叔大叔的", id: 4 },
  { text: "5- 撒打算大的撒十大啊大大撒是的啊大叔的a s s d", id: 5 },
  { text: "6-aksfhk但是非是的发送到发送地方ashfkasfh", id: 6 },
  { text: "7-akssfhk都非对方是的发送到发送地方ashfkasfh", id: 7 },
  { text: "8-aksfsfh的发送到发送到发送kashfkasfh", id: 8 },
  { text: "9-aksksfhk史蒂夫是的是的d sashfkasfh", id: 9 },
  { text: "10-aksfhka啊大撒打算大是的shfkasfh", id: 10 },
];

const contentRef = ref();

// 动态计算animation
function calcAnimation(totalFrames = 10, stepDistance = 20) {
  const totalFrames = scrollList.length; // 滚动内容的数量
  const stepDistance = 20; // 滚动的距离，须和滚动项高度保持一致，例如：style中的.item的height:20px,所以此处默认给了值为20
  const duration = `${totalFrames * 2}s`; // 总滚动时间
  let keyframeItems = "";
  for (let i = 0; i <= totalFrames; i++) {
    const percent = Math.floor(i * (100 / totalFrames));
    const offset = -(i * stepDistance);
    if ((percent !== 0 && percent !== 100) || i === totalFrames) {
      keyframeItems += `${percent - 1}% { transform: translateY(${
        i === 1 ? 0 : offset + 20
      }px)}\n`;
    }
    keyframeItems += `${percent}% { transform: translateY(${offset}px); }\n`;
  }
  // 注意：动态修改vue样式的animation，要先通过insertRule()添加对应的@keyframes
  document.styleSheets[0].insertRule(`@keyframes moveup {${keyframeItems}}`, 0);
  contentRef.value.style.animation = `moveup ${duration} linear infinite normal`;
}

onMounted(() => {
  calcAnimation();
});
</script>

<style scoped>
.scroll-wrap {
  position: relative;
  width: 250px;
  height: 20px;
  overflow: hidden;
  border: 1px solid #4d0074;
}
.item {
  height: 20px;
  padding-left: 5px;
  line-height: 20px;
  font-size: 12px;
  font-weight: 400;
  color: #4d0074;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}
</style>