当前位置： 首页 > news >正文

使用HTML、CSS和JavaScript创建滚动弹幕效果

news 2026/2/7 10:14:48

使用HTML、CSS和JavaScript创建滚动弹幕效果

在现代网页设计中，滚动文本是一种常见的动态效果，可以吸引用户的注意力并增强交互体验。在这篇博客文章中，我们将详细介绍如何使用HTML、CSS和JavaScript实现滚动文本效果。

效果

在这里插入图片描述

步骤1：设置HTML结构

我们首先需要创建一个基本的HTML结构，包含多个滚动的文本框。以下是示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="index.CSS">
</head>
<body><div class="container"><div class="box"><span>HTML</span><span>CSS</span><span>JS</span><span>JavaWeb</span><span>MySQL</span><span>Java</span><span>Python数学建模</span><span>C语言</span></div><div class="box"><span>HTML</span><span>CSS</span><span>JS</span><span>JavaWeb</span><span>MySQL</span><span>Java</span><span>Python数学建模</span><span>C语言</span></div><div class="box"><span>HTML</span><span>CSS</span><span>JS</span><span>JavaWeb</span><span>MySQL</span><span>Java</span><span>Python数学建模</span><span>C语言</span></div></div><script src="index.JS"></script>
</body>
</html>

代码解析

  • <div class="container">：这个容器将包含所有的滚动文本框。
  • <div class="box">：每个box类的div包含了一组要滚动的文本。

步骤2：添加CSS样式

接下来，我们为文本框和容器添加样式，以确保它们的外观和行为符合预期。以下是CSS代码：

* {margin: 0;padding: 0;box-sizing: border-box;
}body {display: flex;justify-content: center;align-items: center;height: 100vh;font-family: '江城律动黑';font-size: 16px;
}.container {position: relative;display: flex;width: 700px;height: 150px;overflow: hidden;mask-image: linear-gradient(90deg, transparent, red 20%, red 80%, transparent);background-color: aqua;cursor: pointer;
}.container div {position: absolute;width: 700px;white-space: nowrap;left: 0;
}.container div:nth-of-type(1) {top: 20px;
}.container div:nth-of-type(2) {top: 60px;
}.container div:nth-of-type(3) {top: 100px;
}.container span {display: inline-block;white-space: nowrap;letter-spacing: .2em;padding: 5px 10px;margin: 0 10px;background-color: white;border-radius: 10px;
}

样式解析

  • 基本样式：重置了默认的边距和填充，以避免浏览器差异。
  • .container：设置为相对定位，使其中的文本框可以绝对定位。使用mask-image创建一个渐变遮罩，增加视觉效果。
  • .box：每个文本框的位置通过绝对定位来设置，便于实现动画效果。
  • .span：文本元素的样式，包括背景色和边角圆润效果。

步骤3：实现JavaScript功能

最后，我们将使用JavaScript为文本框添加移动效果。以下是JavaScript代码：

const boxElements = document.getElementsByClassName("box");
const box_1 = boxElements[0];
const box_2 = boxElements[1];
const box_3 = boxElements[2];function moveBox(element) {// 移动到左侧element.style.left = "-130%";// 设置过渡效果element.style.transition = "left 5s";// 等待一段时间后，移动到右侧setTimeout(() => {element.style.left = "120%";// 移除过渡效果element.style.transition = "left 0s";// 再次调用函数形成循环setTimeout(() => moveBox(element), 200);}, 4500);
}// 分别调用moveBox函数，设置不同的延迟时间
setTimeout(() => moveBox(box_1), 2000);
setTimeout(() => moveBox(box_2), 3700);
setTimeout(() => moveBox(box_3), 4800);

功能解析

  • 获取元素：通过getElementsByClassName获取所有的文本框。
  • moveBox函数：负责将文本框向左移动并再移动到右侧，形成循环。
  • 动画效果：通过setTimeout设置动画的时延，以确保不同文本框的滚动效果不重叠。

总结

通过以上步骤，成功创建了一个动态滚动文本效果，使网页更具吸引力。这个效果可以用于展示信息、提示、或者任何你想要用户注意的内容。希望你能在自己的项目中实现这个功能，欢迎分享你的经验和想法！

相关文章：

使用HTML、CSS和JavaScript创建滚动弹幕效果

使用HTML、CSS和JavaScript创建滚动弹幕效果 在现代网页设计中&#xff0c;滚动文本是一种常见的动态效果&#xff0c;可以吸引用户的注意力并增强交互体验。在这篇博客文章中&#xff0c;我们将详细介绍如何使用HTML、CSS和JavaScript实现滚动文本效果。 效果 步骤1&#xf…...

编程日记 2024/10/13 21:08:51

【C语言】--数组

&#x1f60a;个人主页: 起名字真南 &#x1f60b;个人专栏:【数据结构初阶】 【C语言】 【C】 目录 1 数组的概念2 一维数组的创建和初始化2.2 数组的初始化2.3 数组类型 3 一维数组的使用3.1 数组下标3.2 数组的输入 4 一维数组在内存中的存储5 sizeof计算数组中的元素6 二维…...

编程日记 2024/10/13 21:06:48

面向B2B市场的Spring Boot医疗病历系统开发

第1章绪论 计算机已经从科研院所&#xff0c;大中型企业&#xff0c;走进了平常百姓家&#xff0c;Internet遍及世界各地&#xff0c;在网上能够用计算机进行文字草拟、修改、打印清样、文件登陆、检索、综合统计、分类、数据库管理等&#xff0c;用科学的方法将无序的信息进行…...

编程日记 2024/10/13 21:05:47

闭着眼学机器学习——支持向量机分类

引言&#xff1a; 在正文开始之前&#xff0c;首先给大家介绍一个不错的人工智能学习教程&#xff1a;https://www.captainbed.cn/bbs。其中包含了机器学习、深度学习、强化学习等系列教程&#xff0c;感兴趣的读者可以自行查阅。 1. 算法介绍 支持向量机(Support Vector Mach…...

编程日记 2024/10/13 21:03:45

今日指数项目day8实战权限管理器(上)

3.权限管理器 3.1 权限列表展示功能 1&#xff09;原型效果 2&#xff09;接口说明 功能描述&#xff1a; 查询所有权限集合 服务路径&#xff1a; /api/permissions 服务方法&#xff1a;Get 请求参数&#xff1a;无响应数据格式: {"code": 1,"data":…...

编程日记 2024/10/13 21:02:44

《机器学习与数据挖掘综合实践》实训课程教学解决方案

一、引言 随着信息技术的飞速发展&#xff0c;人工智能已成为推动社会进步的重要力量。作为人工智能的核心技术之一&#xff0c;机器学习与数据挖掘在各行各业的应用日益广泛。本方案旨在通过系统的理论教学、丰富的实践案例和先进的实训平台&#xff0c;帮助学生掌握机器学习…...

编程日记 2024/10/13 21:00:43

linux中软连接和硬链接的区别

定义与概念 硬链接&#xff08;Hard Link&#xff09;&#xff1a;硬链接是文件系统中的一个概念&#xff0c;它直接指向文件系统中的物理数据块。可以把硬链接看作是原始文件的一个别名&#xff0c;它们共享相同的inode&#xff08;索引节点&#xff09;编号。在Linux文件系统…...

编程日记 2024/10/13 20:58:41

#Swift 对比 Static 在Swift 和 OC中的用法

在 Objective-C 和 Swift 中&#xff0c;static 关键字都用于定义类型级别的成员&#xff0c;但它们的用法和行为在两个语言中有所不同。让我们来详细对比一下 Objective-C 和 Swift 中 static 的使用方式和特性。 1. Objective-C 中的 static 在 Objective-C 中&#xff0c;…...

编程日记 2024/10/13 20:57:37

yakit使用教程（三，端口探测和指纹扫描）

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 前言&#xff1a; 前文链接&#xff1a;yakit下载安装教程。 1.端口扫描的作用。 对目标端口进行扫描可以知道目标服务器开启了什么服务&#xff0c;以便于针对其所存在的服务展开…...

编程日记 2024/10/13 20:54:33

一维数组的引用

#define SIZE 5 int main(void) { int i 0; int arr[SIZE] { 86,85,85,896,45 };//同理五个数据只是偶然&#xff0c;可能会更多 //输入 for (i 0;i < SIZE;i) { printf("请输入你的第%d个值&#xff1a;",i1); scanf_s(&…...

编程日记 2024/10/13 20:51:30

Vue3 watch 监视属性

作用&#xff1a;监视数据的变化&#xff08;和Vue2中的watch作用一致&#xff09;特点&#xff1a;Vue3中的watch只能监视以下四种数据&#xff1a; ref定义的数据。reactive定义的数据。函数返回一个值&#xff08;getter函数&#xff09;。一个包含上述内容的数组。 我们在V…...

编程日记 2024/10/13 20:50:30

大数据-158 Apache Kylin 安装配置详解 集群模式启动

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…...

编程日记 2024/10/13 20:49:28

PHP商会招商项目系统一站式服务助力企业腾飞

商会招商项目系统——一站式服务&#xff0c;助力企业腾飞 &#x1f680;&#x1f4bc; &#x1f680; 开篇&#xff1a;企业成长的加速器&#xff0c;商会招商项目系统来袭 在竞争激烈的市场环境中&#xff0c;企业如何快速找到适合自己的发展路径&#xff0c;实现腾飞&…...

编程日记 2024/10/13 20:48:27

pnpm 和 npm

pnpm 和 npm 是 JavaScript 生态系统中常用的包管理工具&#xff0c;它们各自有不同的特性和优缺点。下面是这两者的详细比较&#xff1a; 1. 基本概念 npm (Node Package Manager)&#xff1a; 是 Node.js 的默认包管理器&#xff0c;提供安装、更新、卸载 JavaScript 包的功…...

编程日记 2024/10/13 20:47:26

笔试算法总结

文章目录 题目1题目2题目3题目4 题目1 使用 StringBuilder 模拟栈的行为&#xff0c;通过判断相邻2个字符是否相同&#xff0c;如果相同就进行删除 public class Main {public static String fun(String s) {if (s null || s.length() < 1) return s;StringBuilder builde…...

编程日记 2024/10/13 20:45:24

mybatisPlus对于pgSQL中UUID和UUID[]类型的交互

在PGSQL中&#xff0c;有的类型是UUID和UUID[]这种类型&#xff0c;在mybatis和这些类型交互的时候需要手动设置类型处理器才可以&#xff0c;这里记录一下类型处理器的设置 /*** UUID类型处理器*/ public class UUIDTypeHandler extends BaseTypeHandler<UUID> {/*** 获…...

编程日记 2024/10/13 20:44:22

vue3 高德地图标注（飞线，呼吸点）效果

装下这两个 npm 忘了具体命令了&#xff0c;百度一下就行 “loca”: “^1.0.1”, “amap/amap-jsapi-loader”: “^1.0.1”, <template><div id"map" style"width: 100%;height: 100%;"></div> </template><script setup> …...

编程日记 2024/10/13 20:42:20

程序员成长秘籍：是迈向管理巅峰，还是深耕技术架构？

专业在线打字练习平台-巧手打字通&#xff0c;只输出有价值的知识。 一 管理和架构 做技术的同学一般有两条职业发展路径&#xff0c;横向的管理路线和纵向的技术路线。管理路线对应的是管理岗&#xff0c;讲究的是排兵布阵&#xff0c;通过各种资源的优化配置发挥价值。技术路…...

编程日记 2024/10/13 20:41:19

xargs的参数及常用命令

1. xargs 命令简介 xargs 是一个非常有用的工具&#xff0c;它用于从标准输入&#xff08;stdin&#xff09;构建和执行命令行。xargs 可以将标准输入中以空格或换行符分隔的数据&#xff0c;转化为命令的参数传递给其他命令。 使用场景&#xff1a; 当某些命令不支持使用管…...

编程日记 2024/10/13 20:39:17

FLASK 数据库建立以及部署和表的创建

首先安装flask-sqlalchemy db SQLAlchemy(app) 一 Mmeber、User模型类的创建 # coding: utf-8 from app import db, appclass Member(db.Model):__tablename__ memberid db.Column(db.Integer, primary_keyTrue)membername db.Column(db.String(100), uniqueTrue, index…...

编程日记 2024/10/13 20:38:15

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/1/27 18:11:42

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2026/1/21 9:06:43

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2026/2/1 5:45:17

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2026/2/2 2:30:58

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2026/1/23 7:56:54

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36