原生HTML实现marquee向上滚动效果
作者：小教学发布时间：2023-09-25分类：程序开发学习浏览：114
导读：实现原理：借助CSS3中animation动画以及原生JS克隆API<!DOCTYPEhtml><htmllang="en"><hea...
实现原理：借助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>
实现效果：
- 程序开发学习排行
- 最近发表