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

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

news 2025/6/28 4:26:57

使用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

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/6/21 17:25:07

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/6/17 11:11:11

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/6/25 4:11:11

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/6/26 5:18:35

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2025/6/26 9:19:14

Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

编程新知 2025/6/20 11:58:47

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2025/6/27 18:32:16

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

编程新知 2025/6/28 0:22:31

结构化文件管理实战：实现目录自动创建与归类

手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题&#xff0c;进而引发后续程序异常。使用工具进行标准化操作&#xff0c;能有效降低出错概率。 需要快速整理大量文件的技术用户而言&#xff0c;这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB&#xff0c;…...

编程新知 2025/6/26 2:23:47

CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx

“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网&#xff08;IIoT&#xff09;场景中&#xff0c;结合 DDS&#xff08;Data Distribution Service&#xff09; 和 Rx&#xff08;Reactive Extensions&#xff09; 技术&#xff0c;实现 …...

编程新知 2025/6/24 6:54:50