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

news2024/11/25 4:27:24

实现原理：借助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>

实现效果：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1036766.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【MySQL集群二】使用MyCat和ProxySql代理MySQL集群

【MySQL集群二】使用MyCat和ProxySql代理MySQL集群

中间件代理MySQL MyCat安装MyCat介绍&#xff1a;步骤1&#xff1a;安装Java环境步骤2&#xff1a;下载并解压Mycat步骤3&#xff1a;配置Mycat步骤4&#xff1a;启动Mycat ProxySql安装ProxySql介绍&#xff1a;步骤1&#xff1a;更新系统步骤2&#xff1a;安装ProxySQL步骤3&…
阅读更多...
数学笔记：傅里叶变化

数学笔记：傅里叶变化

1 介绍 简而言之&#xff0c;傅里叶变换把一个输入信号分解成一堆正弦波的叠加 比如&#xff0c;以下是一个波&#xff1a; 这个波可以分解为两个正弦波的叠加。 也就是说&#xff0c;当我们将两个正弦波相加时&#xff0c;就会得到原来的波 哪怕是一个方波 也可以分解成一组…
阅读更多...
【块状链表C++】文本编辑器（指针中 引用 的使用）

【块状链表C++】文本编辑器（指针中 引用 的使用）

》》》算法竞赛 /*** file * author jUicE_g2R(qq:3406291309)————彬(bin-必应)* 一个某双流一大学通信与信息专业大二在读 * * brief 一直在竞赛算法学习的路上* * copyright 2023.9* COPYRIGHT 原创技术笔记&#xff1a;转载…
阅读更多...
稀疏奖励问题解决方案总览

稀疏奖励问题解决方案总览

方案简介 HER (Hindsight Experience Replay) - 2017年 思想 HER&#xff08;Hindsight Experience Replay&#xff09;是一种特别设计用于解决稀疏奖励问题的强化学习算法。它主要用于那些具有高度稀疏奖励和延迟奖励的任务&#xff0c;特别是在连续动作空间中&#xff0c;如机…
阅读更多...
IDEA设置注释快捷键进行 注释对齐

IDEA设置注释快捷键进行 注释对齐

给大家推荐一个嘎嘎好用的功能~ 相信大家在使用IDE写代码的时候&#xff0c;经常用到 Ctrl / 来注释代码吧&#xff0c;但是默认的是将注释在行首对齐&#xff0c;看着很让人不舒服。但是下面的操作会将注释会和当前代码对齐&#xff0c;还会自动保留一个空格&#xff0c;真的…
阅读更多...
【用unity实现100个游戏之13】复刻类泰瑞利亚生存建造游戏——包括建造系统和库存系统

【用unity实现100个游戏之13】复刻类泰瑞利亚生存建造游戏——包括建造系统和库存系统

文章目录 前言素材人物瓦片其他 一、建造系统1. 定义物品类2. 绘制地图3. 实现瓦片选中效果4. 限制瓦片选择5. 放置物品功能6. 清除物品7. 生成和拾取物品功能 二、库存系统1. 简单绘制UI2. 零代码控制背包的开启关闭3. 实现物品的拖拽拖拽功能拖拽恢复问题 4. 拖拽放置物品5. …
阅读更多...
【C语言精髓 之 指针】指针*、取地址、解引用*、引用

【C语言精髓 之 指针】指针*、取地址、解引用*、引用

/*** file * author jUicE_g2R(qq:3406291309)————彬(bin-必应)* 一个某双流一大学通信与信息专业大二在读 * copyright 2023.9* COPYRIGHT 原创技术笔记&#xff1a;转载需获得博主本人同意&#xff0c;且需标明转载源* language …
阅读更多...
人工智能驱动的自然语言处理：解锁文本数据的价值

人工智能驱动的自然语言处理：解锁文本数据的价值

文章目录 什么是自然语言处理&#xff1f;NLP的应用领域1. 情感分析2. 机器翻译3. 智能助手4. 医疗保健5. 舆情分析 使用Python进行NLP避免NLP中的陷阱结论 &#x1f389;欢迎来到AIGC人工智能专栏~人工智能驱动的自然语言处理&#xff1a;解锁文本数据的价值 ☆* o(≧▽≦)o *…
阅读更多...
flutter web 优化和flutter_admin_template

flutter web 优化和flutter_admin_template

文章目录 Flutter Admin TemplateLive demo: https://githubityu.github.io/live_flutter_adminWeb 优化 Setup登录注册英文 亮色主题 中文 暗黑主题管理员登录权限 根据权限动态添加路由 第三方依赖License最后参考学习 Flutter Admin Template Responsive web with light/da…
阅读更多...
C++ 学习系列 -- std::vector (未完待续)

C++ 学习系列 -- std::vector (未完待续)

一 std::vector 是什么&#xff1f; vector 是c 中一种序列式容器&#xff0c;与前面说的 array 类似&#xff0c;其内存分配是连续的&#xff0c;但是与 array 不同的地方在于&#xff0c;vector 在运行时是可以动态扩容的&#xff0c;此外 vector 提供了许多方便的操作&…
阅读更多...
世界前沿技术发展报告2023《世界信息技术发展报告》（四）电子信息技术

世界前沿技术发展报告2023《世界信息技术发展报告》（四）电子信息技术

&#xff08;四&#xff09;电子信息技术 1. 概述2. 微电子技术2.1 精细制程芯片2.1.1 中国台积电发布2纳米制程工艺细节2.1.2 美国英特尔公司称2030年芯片晶体管密度将达到目前的10倍2.1.3 韩国三星电子率先实现3纳米制程芯片量产2.1.4 日本丰田、索尼等8家公司合资成立高端芯…
阅读更多...
【李沐深度学习笔记】矩阵计算（1）

【李沐深度学习笔记】矩阵计算（1）

课程地址和说明 线性代数实现p4 本系列文章是我学习李沐老师深度学习系列课程的学习笔记&#xff0c;可能会对李沐老师上课没讲到的进行补充。 本节是第一篇 矩阵计算 标量导数 导数刻画的是函数在某点的瞬时变化率 这东西都是考研学过的&#xff0c;快速略过&#xff0c;如…
阅读更多...
网站接入公网并配置域名访问【详细教程】

网站接入公网并配置域名访问【详细教程】

网站接入公网并配置域名访问【详细教程】 安装Nginx上传网页文件配置Nginx腾讯云配置域名映射接入公网备案流程 本教程将以腾讯云服务器和腾讯云域名为例&#xff0c;介绍如何快速将网站接入公网并配置域名访问。我们将使用xshell工具进行操作&#xff0c;并涵盖安装nginx、上传…
阅读更多...
Unity之VR如何实现跟随视角的UI

Unity之VR如何实现跟随视角的UI

前言 我们在制作VR项目的时候，大部分时候，是把UI固定到一个位置，比如桌子或者空中，这么做固然稳定，但是当我们有以下需求的时候，固定位置的UI可能会不适用： 1.场景较小，操作物体占用了很大体积，没有固定的可以清晰显示完整UI的位置。 2.需要频繁的前后左右，更换姿势…
阅读更多...
Unity3D 使用LineRenderer自由画线

Unity3D 使用LineRenderer自由画线

原理 一个LineRenderer是一次画线&#xff0c;需要使用对象池一帧记录一个鼠标位置 代码 这是线绘制器的代码&#xff0c;依赖于笔者写过的一个简易对象池 传送门&#xff1a;>>对象池 using EasyAVG; using System; using System.Collections.Generic; using UnityEn…
阅读更多...
指针和数组笔试题的透析

指针和数组笔试题的透析

指针---进阶篇&#xff08;三&#xff09; 一、前言二、一维数组例题透析&#xff1a;三、指针笔试题1.例一&#xff1a;2.例二&#xff1a;3.例三&#xff1a;4.例四&#xff1a;5.例五&#xff1a;6.例六&#xff1a; 一、前言 那么好了好了&#xff0c;宝子们&#xff0c;从…
阅读更多...
王道408计组汇编语言部分学习总结

王道408计组汇编语言部分学习总结

x86汇编语言指令基础 x86处理器中程序计数器PC 通常被称为IP 高级语言—>汇编语言—>机器语言 x86架构CPU&#xff0c;有哪些寄存器 EAX通用寄存器EBXECXEDXESI 变址寄存器 变址寄存器可用于线性表、字符串的处理EDIEBP堆栈基指针堆栈寄存器用于实现函数调用 ESP堆栈…
阅读更多...
LESS的叶绿素荧光模拟实现与操作

LESS的叶绿素荧光模拟实现与操作

LESS的叶绿素荧光模拟实现与操作 前情提要FLUSPECT模型荧光的三维面元冠层辐射传输过程日光诱导叶绿素荧光模拟 前情提要 本文默认您对LESS (LargE-Scale remote sensing data and image Simulation framework) 模型和叶绿素荧光(Sun-Induced chlorophyll Fluorescence, SIF)有…
阅读更多...
2023华为杯研究生数学建模研赛E题出血脑卒中完整论文（含28个详细预处理数据及结果表格）

2023华为杯研究生数学建模研赛E题出血脑卒中完整论文（含28个详细预处理数据及结果表格）

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了全国研究生数学建模竞赛&#xff08;数模研赛&#xff09;E题完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。…
阅读更多...
高级运维学习（十）系统安全

高级运维学习（十）系统安全

kali 实际上它就是一个预安装了很多安全工具的Debian Linux [rootmyhost ~]# kali reset kali reset OK. 该虚拟机系统用户名为:kali,密码为:kali 基础配置 $ ip a s # 查看网络IP地址&#xff0c;本例中查看到的是192.168.88.40 $ sudo systemctl start ssh # 启s…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023