原生HTML实现marquee向上滚动效果
作者:小教学发布时间:2023-09-25分类:程序开发学习浏览:129
导读:实现原理:借助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>
实现效果:
- 程序开发学习排行
- 最近发表
-
- PSV游戏最简安装教程
- PSV中文游戏全集
- Otter Blocks Gutenberg Blocks,Page Builder for Gutenberg Editor amp; FSE 最好的WordPress常用插件下载 博客插件模块
- 支付表格、立即购买按钮和发票系统|GetPaid 最好的WordPress通用插件下载 博客插件模块
- Super Web Share Native Social Sharing Button 最好的WordPress常用插件下载 博客插件模块
- Post to PDF Exporter 最好的WordPress通用插件下载 博客插件模块
- 队列Ajax Calls性能最好的WordPress常用插件下载 博客插件模块
- Ultimate Tag Cloud Elementor Addon 最好的WordPress常用插件下载 博客插件模块
- 产品布局Elementor Addon 最好的WordPress常用插件下载 博客插件模块
- Shiptastic集成for UPS 最好的WordPress通用插件下载 博客插件模块