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,所以此处默认给了值为20const 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()添加对应的@keyframesdocument.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>