使用HTML、CSS和JavaScript创建滚动弹幕效果
使用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创建滚动弹幕效果 在现代网页设计中，滚动文本是一种常见的动态效果，可以吸引用户的注意力并增强交互体验。在这篇博客文章中，我们将详细介绍如何使用HTML、CSS和JavaScript实现滚动文本效果。 效果 步骤1…...
【C语言】--数组
😊个人主页: 起名字真南 😋个人专栏:【数据结构初阶】 【C语言】 【C】 目录 1 数组的概念2 一维数组的创建和初始化2.2 数组的初始化2.3 数组类型 3 一维数组的使用3.1 数组下标3.2 数组的输入 4 一维数组在内存中的存储5 sizeof计算数组中的元素6 二维…...
面向B2B市场的Spring Boot医疗病历系统开发
第1章绪论 计算机已经从科研院所，大中型企业，走进了平常百姓家，Internet遍及世界各地，在网上能够用计算机进行文字草拟、修改、打印清样、文件登陆、检索、综合统计、分类、数据库管理等，用科学的方法将无序的信息进行…...
闭着眼学机器学习——支持向量机分类
引言： 在正文开始之前，首先给大家介绍一个不错的人工智能学习教程：https://www.captainbed.cn/bbs。其中包含了机器学习、深度学习、强化学习等系列教程，感兴趣的读者可以自行查阅。 1. 算法介绍 支持向量机(Support Vector Mach…...
今日指数项目day8实战权限管理器(上)
3.权限管理器 3.1 权限列表展示功能 1）原型效果 2）接口说明 功能描述： 查询所有权限集合 服务路径： /api/permissions 服务方法：Get 请求参数：无响应数据格式: {"code": 1,"data":…...
《机器学习与数据挖掘综合实践》实训课程教学解决方案
一、引言 随着信息技术的飞速发展，人工智能已成为推动社会进步的重要力量。作为人工智能的核心技术之一，机器学习与数据挖掘在各行各业的应用日益广泛。本方案旨在通过系统的理论教学、丰富的实践案例和先进的实训平台，帮助学生掌握机器学习…...
linux中软连接和硬链接的区别
定义与概念 硬链接（Hard Link）：硬链接是文件系统中的一个概念，它直接指向文件系统中的物理数据块。可以把硬链接看作是原始文件的一个别名，它们共享相同的inode（索引节点）编号。在Linux文件系统…...
#Swift 对比 Static 在Swift 和 OC中的用法
在 Objective-C 和 Swift 中，static 关键字都用于定义类型级别的成员，但它们的用法和行为在两个语言中有所不同。让我们来详细对比一下 Objective-C 和 Swift 中 static 的使用方式和特性。 1. Objective-C 中的 static 在 Objective-C 中，…...
yakit使用教程（三，端口探测和指纹扫描）
本文仅作为学习参考使用，本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 前言： 前文链接：yakit下载安装教程。 1.端口扫描的作用。 对目标端口进行扫描可以知道目标服务器开启了什么服务，以便于针对其所存在的服务展开…...
一维数组的引用
#define SIZE 5 int main(void) { int i 0; int arr[SIZE] { 86,85,85,896,45 };//同理五个数据只是偶然，可能会更多 //输入 for (i 0;i < SIZE;i) { printf("请输入你的第%d个值：",i1); scanf_s(&…...
Vue3 watch 监视属性
作用：监视数据的变化（和Vue2中的watch作用一致）特点：Vue3中的watch只能监视以下四种数据： ref定义的数据。reactive定义的数据。函数返回一个值（getter函数）。一个包含上述内容的数组。 我们在V…...
大数据-158 Apache Kylin 安装配置详解 集群模式启动
点一下关注吧！！！非常感谢！！持续更新！！！ 目前已经更新到了： Hadoop（已更完）HDFS（已更完）MapReduce（已更完&am…...
PHP商会招商项目系统一站式服务助力企业腾飞
商会招商项目系统——一站式服务，助力企业腾飞 🚀💼 🚀 开篇：企业成长的加速器，商会招商项目系统来袭 在竞争激烈的市场环境中，企业如何快速找到适合自己的发展路径，实现腾飞&…...
pnpm 和 npm
pnpm 和 npm 是 JavaScript 生态系统中常用的包管理工具，它们各自有不同的特性和优缺点。下面是这两者的详细比较： 1. 基本概念 npm (Node Package Manager)： 是 Node.js 的默认包管理器，提供安装、更新、卸载 JavaScript 包的功…...
笔试算法总结
文章目录 题目1题目2题目3题目4 题目1 使用 StringBuilder 模拟栈的行为，通过判断相邻2个字符是否相同，如果相同就进行删除 public class Main {public static String fun(String s) {if (s null || s.length() < 1) return s;StringBuilder builde…...
mybatisPlus对于pgSQL中UUID和UUID[]类型的交互
在PGSQL中，有的类型是UUID和UUID[]这种类型，在mybatis和这些类型交互的时候需要手动设置类型处理器才可以，这里记录一下类型处理器的设置 /*** UUID类型处理器*/ public class UUIDTypeHandler extends BaseTypeHandler<UUID> {/*** 获…...
vue3 高德地图标注（飞线，呼吸点）效果
装下这两个 npm 忘了具体命令了，百度一下就行 “loca”: “^1.0.1”, “amap/amap-jsapi-loader”: “^1.0.1”, <template><div id"map" style"width: 100%;height: 100%;"></div> </template><script setup> …...
程序员成长秘籍：是迈向管理巅峰，还是深耕技术架构？
专业在线打字练习平台-巧手打字通，只输出有价值的知识。 一 管理和架构 做技术的同学一般有两条职业发展路径，横向的管理路线和纵向的技术路线。管理路线对应的是管理岗，讲究的是排兵布阵，通过各种资源的优化配置发挥价值。技术路…...
xargs的参数及常用命令
1. xargs 命令简介 xargs 是一个非常有用的工具，它用于从标准输入（stdin）构建和执行命令行。xargs 可以将标准输入中以空格或换行符分隔的数据，转化为命令的参数传递给其他命令。 使用场景： 当某些命令不支持使用管…...
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…...
【杂谈】-递归进化：人工智能的自我改进与监管挑战
递归进化：人工智能的自我改进与监管挑战 文章目录 递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点，不需要开启数据库闪回。…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
MMaDA: Multimodal Large Diffusion Language Models
CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...