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

html + css 顶部滚动通知栏示例

news 2025/12/26 21:34:23

前言

在现代网页设计中，一个吸引人的顶部滚动通知栏不仅能够有效传达重要信息，还能提升用户体验。通过使用HTML和CSS，我们可以创建既美观又功能强大的组件，这些组件可以在不影响网站整体性能的情况下提供实时更新或紧急通知。

本示例将展示如何使用div元素和纯CSS来构建一个固定在页面顶部的滚动通知栏，而不依赖于已经废弃的<marquee>标签。我们将介绍必要的HTML结构以及相应的CSS样式，包括一个自定义的动画效果，确保文本可以平滑地从右向左滚动，同时保持良好的浏览器兼容性和可读性。

使用div和纯CSS实现滚动效果

html代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="index.css"><title>滚动通知栏示例</title>
</head><body><!-- 滚动通知栏 --><div class="scrolling-notification-bar"><div class="scrolling-text-wrapper"><div class="scrolling-text">过了腊八就是年。</div></div></div><!-- 页面其他内容 --><div class="content"><h4>腊八粥香，年味渐浓</h4><p>腊八粥的香气飘散在空气中，仿佛在提醒我们，春节的脚步已经近在咫尺。让我们一起期待这个充满欢声笑语的节日吧！</p><h4>腊八过后，年味渐浓</h4><p>腊八粥的温暖，预示着春节的临近。让我们在这个寒冷的冬日里，感受家的温暖和节日的喜悦。</p><h4>腊八粥香，年味渐浓，团圆不远</h4><p>腊八粥的香气，是春节的前奏。让我们在腊八的温暖中，期待与家人团聚的温馨时刻。</p><h4>腊八粥香，年味渐浓，喜气洋洋</h4><p>腊八粥的香甜，是春节的序曲。让我们在这个充满喜气的季节里，迎接新的一年，新的希望。</p><h4>腊八粥香，年味渐浓，欢声笑语</h4><p>腊八粥的香气，是春节的信号。让我们在这个充满欢声笑语的季节里，感受家的温暖和节日的快乐。</p></div>
</body></html>

css (index.css) 代码如下：

/* 确保通知栏始终在页面顶部 */
.scrolling-notification-bar {position: fixed;top: 0;left: 0;width: 100%;background-color: #333;color: #fff;text-align: center;padding: 10px 0;z-index: 1000;
}
.scrolling-text-wrapper {overflow: hidden;white-space: nowrap;
}
.scrolling-text {display: inline-block;padding-left: 100%; /* 初始位置在外边 */animation: scrollText 20s linear infinite;
}
@keyframes scrollText {from {transform: translateX(0);}to {transform: translateX(-100%);}
}.content {margin-top: 100px;
}

结语

通过上述代码示例，我们成功创建了一个既简单又实用的顶部滚动通知栏，它能够很好地适应各种屏幕尺寸，并且与现代Web标准相兼容。此通知栏不仅可以用于展示最新的新闻、促销活动等信息，还可以根据需要进行样式调整，以匹配不同网站的设计风格。

希望这个例子能为你的项目提供灵感，并帮助你实现更加互动和用户友好的Web界面。

相关文章：

html + css 顶部滚动通知栏示例

前言 在现代网页设计中&#xff0c;一个吸引人的顶部滚动通知栏不仅能够有效传达重要信息&#xff0c;还能提升用户体验。通过使用HTML和CSS&#xff0c;我们可以创建既美观又功能强大的组件&#xff0c;这些组件可以在不影响网站整体性能的情况下提供实时更新或紧急通知。 本…...

编程日记 2025/1/12 13:26:55

【Rust自学】11.6. 控制测试运行：并行和串行（连续执行）测试

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.6.1. 控制测试的运行方式 cargo test和cargo run一样&#xff0c;cargo test也会编译代码并生成一个二进制文件用于测试&#xff0c;…...

编程日记 2025/1/12 13:25:54

某漫画网站JS逆向反混淆流程分析

文章目录 1. 写在前面1. 接口分析2. 反混淆分析 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Pyth…...

编程日记 2025/1/12 13:19:46

React 中事件机制详细介绍：概念与执行流程如何更好的理解

React 的事件机制是一个非常重要的概念&#xff0c;它涉及到 React 如何处理用户的交互事件。React 的事件系统与传统的 DOM 事件系统有所不同&#xff0c;它在底层使用了事件委托和合成事件&#xff08;Synthetic Events&#xff09;来优化性能。下面&#xff0c;我们将从 Rea…...

编程日记 2025/1/12 13:18:43

Day04-后端Web基础(Maven基础)

目录 Maven课程内容1. Maven初识1.1 什么是Maven?1.2 Maven的作用1.2.1 依赖管理1.2.2 项目构建1.2.3 统一项目结构 2. Maven概述2.1 Maven介绍2.2 Maven模型2.3 Maven仓库2.4 Maven安装2.4.1 下载2.4.2 安装步骤 3. IDEA集成Maven3.1 配置Maven环境3.1.2 全局设置 3.2 Maven项…...

编程日记 2025/1/12 13:10:32

vue3模板语法+响应式基础

模板语法 1. disabled指令&#xff0c;可以用于禁用按钮 <button :disabled"isButtonDisabled">Button</button> //:disabled是一个指令&#xff0c;用于根据isButtonDisabled的值来动态控制按钮的禁用状态。 使用场景&#xff1a; 1.防止用户重复点击…...

编程日记 2025/1/12 13:09:29

【面试题】简单聊一下什么是云原生、什么是k8s、容器，容器与虚机相比优势

云原生&#xff08;Cloud Native&#xff09; 定义&#xff1a;云原生是一种构建和运行应用程序的方法&#xff0c;旨在充分利用云计算的优势。它涵盖了一系列技术和理念&#xff0c;包括容器化、微服务架构、自动化部署与管理等。特点&#xff1a;云原生应用程序被设计为可弹性…...

编程日记 2025/1/12 13:08:28

数据挖掘实训：天气数据分析与机器学习模型构建

随着气候变化对各行各业的影响日益加剧&#xff0c;精准的天气预测已经变得尤为重要。降雨预测在日常生活中尤其关键&#xff0c;例如农业、交通和灾害预警等领域。本文将通过机器学习方法&#xff0c;利用历史天气数据预测明天是否会下雨&#xff0c;具体内容包括数据预处理、…...

编程日记 2025/1/12 13:05:24

STM32如何使用内部晶振作为晶振

目录 前言 首先说明一下芯片内部并没有时钟&#xff0c; 而是内部振荡。使用内部振荡的好处是外部无需设计晶振电路 &#xff0c;再说的简单点 &#xff0c;不用外部晶振依然可以让单片机正常运转。 环境&#xff1a; 芯片&#xff1a;STM32F103C8T6 Keil&#xff1a;V5.24…...

编程日记 2025/1/12 13:02:21

【Maui】导航栏样式调整

前言 .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架&#xff0c;用于使用 C# 和 XAML 创建本机移动和桌面应用。 使用 .NET MAUI&#xff0c;可从单个共享代码库开发可在 Android、iOS、macOS 和 Windows 上运行的应用。 .NET MAUI 是一款开放源代码应用&#xff0c;是 X…...

编程日记 2025/1/12 13:01:20

【黑马程序员三国疫情折线图——json+pyechart=数据可视化】

json数据在文末 将海量的数据处理成我们肉眼可以进行分析的形式&#xff0c;数据的可视化&#xff0c;可以分为两个步骤&#xff1a; 数据处理&#xff1a;利用三方网站厘清json层次格式化&#xff0c;再对文件的读取、检查是否符合JSON规范以及规范化、JSON格式的转化&#…...

编程日记 2025/1/12 12:57:16

如何实现多级缓存？

本文重点说一说在Java应用中&#xff0c;多级缓存如何实现。 多级缓存是比较常见的一种性能优化的手段&#xff0c;一般来说就是本地缓存分布式缓存。 本地缓存一般采用Caffeine和Guava&#xff0c;这两种是性能比较高的本地缓存的框架。他们都提供了缓存的过期、管理等功能。…...

编程日记 2025/1/12 12:56:13

Saas数据库迁移单租户数据

1、背景 租户使用Saas系统&#xff0c;用一段时间后要将系统、数据搬迁到自建服务器。该Saas系统没有按租户分库&#xff0c;且数据库数据量太大&#xff0c;需要将单租户的数据抽取出来。Saas系统使用Mysql5.7数据库&#xff0c;主要使用INFORMATION_SCHEMA.COLUMNS表进行数据…...

编程日记 2025/1/12 12:55:12

LeetCode100之括号生成(22)--Java

1.问题描述 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例1 输入&#xff1a;n 3 输出&#xff1a;["((()))","(()())","(())()","()(())","()()()&qu…...

编程日记 2025/1/12 12:52:09

阿里云ios镜像源

阿里云镜像源&#xff1a;阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 下载centos7...

编程日记 2025/1/12 12:51:08

芯片：为何英伟达的GPU能在AI基础设施领域扮演重要角色？

英伟达的GPU之所以能在AI基础设施领域扮演重要角色&#xff0c;主要源于其硬件架构的优势以及其与深度学习算法的高度兼容性。以下是几个关键因素&#xff1a; 1. 并行计算能力 GPU&#xff08;图形处理单元&#xff09;本质上是为处理大量并行计算任务而设计的。与CPU相比&a…...

编程日记 2025/1/12 12:41:58

Linux系统之hostname相关命令基本使用

Linux系统之hostname相关命令基本使用 一、检查本地系统版本二、hostname命令的帮助说明中文帮助说明 三、hostname命令的基本使用1. 查看计算机名2. 查看本机上所有IP地址3. 查看主机FQDN4. 查看短主机名 四、hostnamectl命令的使用1. 查看主机详细信息2. 设置主机名3. hostna…...

编程日记 2025/1/12 12:39:56

Domain Adaptation（李宏毅）机器学习 2023 Spring HW11 （Boss Baseline）

1. 领域适配简介 领域适配是一种迁移学习方法，适用于源领域和目标领域数据分布不同但学习任务相同的情况。具体而言，我们在源领域（通常有大量标注数据）训练一个模型，并希望将其应用于目标领域（通常只有少量或没有标注数据）。然而，由于这两个领域的数据分布不同，模型在…...

编程日记 2025/1/12 12:38:55

在php中，Fiber、Swoole、Swow这3个协程都是如何并行运行的？

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…...

编程日记 2025/1/12 12:37:53

SQLite PRAGMA

SQLite的PRAGMA命令是一种特殊的命令&#xff0c;用于在SQLite环境中控制各种环境变量和状态标志。PRAGMA值可以被读取&#xff0c;也可以根据需求进行设置【0†source】。 PRAGMA命令的语法格式如下&#xff1a; 要查询当前的PRAGMA值&#xff0c;只需提供该PRAGMA的名字&am…...

编程日记 2025/1/12 12:35:50

7.4.分块查找

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

编程新知 2025/12/23 3:06:42

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/12/18 20:09:12

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/12/21 1:00:15

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/12/23 20:11:18

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/12/10 6:18:55

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/12/4 2:32:37

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2025/12/20 22:25:49