原生HTML实现marquee向上滚动效果

实现原理：借助CSS3中animation动画以及原生JS克隆API

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>文字向上滚动效果</title><style>.marquee-view {width: fit-content;height: 300px;background-color: #000;overflow: hidden;}.row {display: flex;justify-content: space-between;line-height: 1.05;color: #ffffff;padding: 15px;cursor: pointer;}.marquee {animation: move 5s linear infinite;}@keyframes move {0% {transform: translateY(0);}100% {transform: translateY(-50%);}}</style></head><body><div class="marquee-view"><div class="marquee"><div class="row"><span>我是滚动文字</span></div><div class="row"><span>我是滚动文字</span></div><div class="row"><span>我是滚动文字</span></div><div class="row"><span>我是滚动文字</span></div><div class="row"><span>我是滚动文字</span></div><div class="row"><span>我是滚动文字</span></div><div class="row"><span>我是滚动文字</span></div></div></div></body><script>const marquee = document.querySelectorAll(".marquee-view .marquee");marquee.forEach((item) => {var rows = item.children;// 克隆子节点并将其附加到 .marquee 元素中Array.from(rows).forEach((row) => {var clone = row.cloneNode(true);item.appendChild(clone);});});</script>
</html>