使用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…...
微信小程序的面试题
简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch() 区别 ？ wx.navigateTo() : 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 wx.redirectTo() : 关闭当前页面，跳转到应用内的…...
udp c语言实现组播的例子
一、组播与广播的区别 1、组播地址和广播地址是不同的概念 组播地址：用于将数据包发送到一组特定的接收者，只有加入该组播地址的设备才能接收数据。它提高了网络效率，因为发送者只需发送一份数据。 广播地址：用于将数据包发送到…...
ffmpeg面向对象——AVInputFormat与URLProtocol啥关系
《ffmpeg面向对象-rtsp拉流相关对象》和《ffmpeg面向对象——拉流协议匹配机制探索》探索过了输入格式匹配和底层协议匹配，且ffmpeg拉流是先是匹配输入格式——抽象为AVInputFormat类，然后再匹配url协议类——抽象为URLProtocol类。 它们是啥关系&#…...
【高阶数据结构】二叉树进阶探秘：AVL树的平衡机制与实现详解
高阶数据结构相关知识点可以通过点击以下链接进行学习一起加油！二叉搜索树 大家好，这里是店小二！今天我们将深入探讨高阶数据结构中的AVL树。AVL树是一种自平衡的二叉搜索树，可以看作是对传统二叉搜索树的优化版本。如果你对数据结…...
中级软考软件设计师真题+模拟题+课件讲解+机考讲解模拟+笔记分享
软考真题分享 下载链接⬇️⬇️： 下载链接...
MySQL—视图
前言： 视图是一个虚拟的表，是基于一个或多个基本表或其他视图的查询结果集。视图本身不占据物理储存空间，仅仅只是一个查询的逻辑表示，物理上依赖于数据表的数据。 视图具有简单，安全，逻辑数据独立&#…...
鸿蒙OS启动流程
启动流程(基于openharmony4.1) 系统上电加载内核后，按照以下流程完成系统各个服务和应用的启动： 内核加载init进程，一般在bootloader启动内核时通过设置内核的cmdline来指定init的位置。init进程启动后，会挂载tmpfs，…...
服务器数据恢复—EMC存储RAID5磁盘阵列数据恢复案例
服务器数据恢复环境： 一台EMC某型号存储设备，该存储中有一组由12块（包括2块热备盘）STAT硬盘组建的raid5阵列。 服务器故障： 该存储在运行过程中突然崩溃，raid瘫痪。数据恢复工程师到达现场对故障存储设备进…...
使用 `netcat`（nc）工具进行TCP数据发送和接收
Netcat（通常缩写为nc）是一个功能强大的网络工具，常被称为“瑞士军刀”的网络工具。它用于在网络上进行各种操作，比如读写网络连接、调试和分析网络服务等。以下是关于Netcat的一些详细介绍： ### 主要功能 1. **TCP/U…...
Linux虚拟化技术嬗变综述
在信息技术飞速发展的今天，虚拟化技术已经成为数据中心、云计算和企业IT基础设施中不可或缺的一部分。Linux操作系统作为开源和灵活的代表，在虚拟化技术的发展中扮演了重要角色。本文将综述Linux虚拟化技术的演变，探讨其优势、应用场景&#…...