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

【HTML】动态背景效果前端页面

article 2026/1/24 3:43:37

下面是一个带有多种动态背景效果的现代化前端页面，包含粒子效果、渐变波浪和星空背景三种可选动态背景。直接上代码！!

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态背景效果展示</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Arial', sans-serif;color: white;overflow: hidden;height: 100vh;background-color: #0a192f; /* 默认背景色 */}.background-selector {position: fixed;top: 20px;right: 20px;z-index: 100;display: flex;gap: 10px;}.bg-btn {padding: 8px 15px;background: rgba(255, 255, 255, 0.2);border: 1px solid rgba(255, 255, 255, 0.3);color: white;border-radius: 20px;cursor: pointer;backdrop-filter: blur(5px);transition: all 0.3s ease;font-size: 14px;}.bg-btn:hover {background: rgba(255, 255, 255, 0.3);}.bg-btn.active {background: rgba(255, 255, 255, 0.4);font-weight: bold;}.content {position: relative;z-index: 10;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;padding: 20px;}h1 {font-size: 3rem;margin-bottom: 20px;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}p {font-size: 1.2rem;max-width: 600px;margin-bottom: 30px;line-height: 1.6;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);}/* 粒子背景容器 */#particles-js {position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 0;display: block;}/* 渐变波浪背景 */.wave-container {position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 0;display: none;overflow: hidden;}.wave {position: absolute;bottom: 0;left: 0;width: 200%;height: 100%;background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size: 400% 400%;animation: gradient 15s ease infinite;}.wave::before,.wave::after {content: '';position: absolute;width: 300%;height: 300%;top: -50%;left: 50%;transform: translate(-50%, -75%);}.wave::before {border-radius: 45%;background: rgba(255, 255, 255, 0.1);animation: wave 15s linear infinite;}.wave::after {border-radius: 40%;background: rgba(255, 255, 255, 0.05);animation: wave 20s linear infinite;}/* 星空背景 */.stars {position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 0;display: none;background-color: #000;}.star {position: absolute;background-color: white;border-radius: 50%;animation: twinkle var(--duration) infinite ease-in-out;}/* 动画效果 */@keyframes gradient {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }}@keyframes wave {0% { transform: translate(-50%, -75%) rotate(0deg); }100% { transform: translate(-50%, -75%) rotate(360deg); }}@keyframes twinkle {0%, 100% { opacity: 0.2; }50% { opacity: 1; }}/* 移动设备适配 */@media (max-width: 768px) {h1 {font-size: 2rem;}p {font-size: 1rem;padding: 0 15px;}.background-selector {top: 10px;right: 10px;flex-direction: column;align-items: flex-end;}.bg-btn {padding: 6px 12px;font-size: 12px;}}</style>
</head>
<body><!-- 背景选择器 --><div class="background-selector"><button class="bg-btn active" data-bg="particles">粒子效果</button><button class="bg-btn" data-bg="wave">渐变波浪</button><button class="bg-btn" data-bg="stars">星空背景</button></div><!-- 页面内容 --><div class="content"><h1>动态背景效果展示</h1><p>这是一个展示不同动态背景效果的页面。点击右上角的按钮可以切换不同的背景风格。</p></div><!-- 粒子背景 --><div id="particles-js"></div><!-- 渐变波浪背景 --><div class="wave-container"><div class="wave"></div></div><!-- 星空背景 --><div class="stars"></div><!-- 粒子效果库 --><script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script><script>// 背景切换功能const bgButtons = document.querySelectorAll('.bg-btn');const backgrounds = {particles: document.getElementById('particles-js'),wave: document.querySelector('.wave-container'),stars: document.querySelector('.stars')};// 显示默认背景backgrounds.particles.style.display = 'block';// 初始化粒子效果function initParticles() {particlesJS('particles-js', {particles: {number: { value: window.innerWidth < 768 ? 40 : 80, // 移动设备减少粒子数量density: { enable: true, value_area: window.innerWidth < 768 ? 600 : 800 } },color: { value: "#ffffff" },shape: { type: "circle" },opacity: { value: 0.5, random: true,anim: { enable: true, speed: 1, opacity_min: 0.1 }},size: { value: 3, random: true,anim: { enable: true, speed: 2, size_min: 0.3 }},line_linked: { enable: true, distance: window.innerWidth < 768 ? 100 : 150, color: "#ffffff", opacity: 0.4, width: 1 },move: { enable: true, speed: window.innerWidth < 768 ? 1 : 2, // 移动设备降低速度direction: "none", random: true, straight: false, out_mode: "bounce",bounce: true}},interactivity: {detect_on: "window",events: {onhover: { enable: true, mode: "repulse",parallax: { enable: true, force: 30, smooth: 10 }},onclick: { enable: true, mode: "push",push: { particles_nb: 4 }},resize: true},modes: {repulse: { distance: window.innerWidth < 768 ? 50 : 100,duration: 0.4},push: { particles_nb: 4 }}},retina_detect: true});}// 创建星空function createStars() {const starsContainer = document.querySelector('.stars');starsContainer.innerHTML = '';const starCount = window.innerWidth < 768 ? 100 : 200; // 移动设备减少星星数量for (let i = 0; i < starCount; i++) {const star = document.createElement('div');star.classList.add('star');// 随机大小 (1-3px)const size = Math.random() * 2 + 1;star.style.width = `${size}px`;star.style.height = `${size}px`;// 随机位置star.style.left = `${Math.random() * 100}%`;star.style.top = `${Math.random() * 100}%`;// 随机闪烁时间star.style.setProperty('--duration', `${Math.random() * 5 + 3}s`);starsContainer.appendChild(star);}}// 初始化星空createStars();// 背景切换事件bgButtons.forEach(button => {button.addEventListener('click', () => {// 更新按钮状态bgButtons.forEach(btn => btn.classList.remove('active'));button.classList.add('active');// 隐藏所有背景Object.values(backgrounds).forEach(bg => bg.style.display = 'none');// 显示选中的背景const selectedBg = button.getAttribute('data-bg');backgrounds[selectedBg].style.display = 'block';// 如果是星空背景，重新生成星星if (selectedBg === 'stars') {createStars();}// 如果是粒子背景，重新初始化if (selectedBg === 'particles') {// 先销毁现有粒子if (window.pJSDom && window.pJSDom.length > 0) {window.pJSDom[0].pJS.fn.vendors.destroy();}// 重新初始化initParticles();}});});// 页面加载时初始化粒子document.addEventListener('DOMContentLoaded', initParticles);// 窗口大小改变时重新调整window.addEventListener('resize', function() {// 如果是粒子背景当前显示，则重新初始化if (backgrounds.particles.style.display === 'block') {if (window.pJSDom && window.pJSDom.length > 0) {window.pJSDom[0].pJS.fn.vendors.destroy();}initParticles();}// 如果是星空背景当前显示，则重新生成星星if (backgrounds.stars.style.display === 'block') {createStars();}});</script>
</body>
</html>

页面特点

  1. 三种动态背景效果：

    • 粒子效果：可交互的粒子网络，鼠标悬停会排斥粒子，点击会添加粒子

    • 渐变波浪：彩色渐变背景加上动态波浪效果

    • 星空背景：随机生成的闪烁星星

  2. 响应式设计：

    • 适配各种屏幕尺寸

    • 在移动设备上自动调整布局

  3. 用户交互：

    • 可以随时切换不同的背景效果

    • 粒子效果支持鼠标交互

  4. 视觉效果：

    • 平滑的动画过渡

    • 精美的色彩搭配

    • 动态生成的随机元素

如何使用

  1. 将代码保存为HTML文件

  2. 在浏览器中打开即可看到效果

  3. 点击右上角的按钮可以切换不同的背景风格

  4. 可以自定义修改内容文字、颜色和动画参数

扩展建议

  1. 添加更多背景效果选项

  2. 实现背景效果的参数自定义

  3. 添加背景音乐配合视觉效果

  4. 保存用户选择的背景偏好到本地存储

这个页面可以直接使用，也可以作为基础集成到你的网站中，为网站增添动态视觉效果。

相关文章：

【HTML】动态背景效果前端页面

下面是一个带有多种动态背景效果的现代化前端页面&#xff0c;包含粒子效果、渐变波浪和星空背景三种可选动态背景。直接上代码&#xff01;! <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name&quo…...

编程日记 2026/1/8 15:40:33

酶动力学参数预测，瓶颈识别……中科院深圳先进技术研究院罗小舟分享AI在酶领域的创新应用

蛋白质&#xff0c;作为生命的基石&#xff0c;在生命活动中发挥着关键作用&#xff0c;其结构和功能的研究&#xff0c;对创新药物研发、合成生物学、酶制剂生产等领域&#xff0c;有着极其重要的意义。但传统蛋白质设计面临诸多难题&#xff0c;蛋白质结构复杂&#xff0c;序…...

编程日记 2026/1/18 13:47:06

【Redis】布隆过滤器应对缓存穿透的go调用实现

布隆过滤器 https://pkg.go.dev/github.com/bits-and-blooms/bloom/v3 作用&#xff1a; 判断一个元素是不是在集合中 工作原理&#xff1a; 一个位数组&#xff08;bit array&#xff09;&#xff0c;初始全为0。多个哈希函数&#xff0c;运算输入&#xff0c;从而映射到位数…...

编程日记 2025/11/29 0:23:05

【LLM】解锁Agent协作：深入了解谷歌 A2A 协议与 Python 实现

人工智能&#xff08;AI&#xff09;智能体正迅速成为企业提高生产力、自动化工作流程和增强运营能力的关键工具。从处理日常重复性任务到协助复杂的决策&#xff0c;智能体的潜力巨大。然而&#xff0c;当这些智能体来自不同的供应商、使用不同的框架或被限制在孤立的数据系统…...

编程日记 2025/11/27 16:35:41

kafka4.0浅尝辄止

最近工作中接触消息队列比较多&#xff0c;前几周又看到kafka4.0发布&#xff0c;故写一篇博客对消息队列做一个复盘。 目录 消息队列对比1. Apache Kafka 4.02. RabbitMQ3. RocketMQ4. ActiveMQ5. Apache Pulsar6. NSQ kafka4.0鲜明的新特性Java 版本要求升级API 更新与精简移…...

编程日记 2026/1/21 8:05:02

数据库原理及应用mysql版陈业斌实验三

&#x1f3dd;️专栏&#xff1a;Mysql_猫咪-9527的博客-CSDN博客 &#x1f305;主页&#xff1a;猫咪-9527-CSDN博客 “欲穷千里目&#xff0c;更上一层楼。会当凌绝顶&#xff0c;一览众山小。” 目录 实验三多表查询 1.实验数据如下 student 表&#xff08;学生表&#…...

编程日记 2026/1/9 1:59:00

OpenHarmony - 小型系统内核（LiteOS-A）（二）

OpenHarmony - 小型系统内核&#xff08;LiteOS-A&#xff09;&#xff08;二&#xff09; 三、基础内核 3.1、中断及异常处理 基本概念 中断是指出现需要时&#xff0c;CPU暂停执行当前程序&#xff0c;转而执行新程序的过程。即在程序运行过程中&#xff0c;出现了一个必须…...

编程日记 2026/1/22 18:57:36

数字化引擎再升级：小匠物联十周年庆典与全链路创新实践

4月11日&#xff0c;浙江宁波的小匠物联十周年庆典拉开帷幕。本次活动以“拾阶而上&#xff0c;智创未来”为主题&#xff0c;从全员签到、心愿书写&#xff0c;到董事长致辞、切蛋糕及全体合影&#xff0c;每一个环节都精心设计&#xff0c;展现出企业在家用物联网领域的卓越技…...

编程日记 2026/1/15 8:59:58

机器学习核心知识：从基础概念到关键算法

摘要 本文深度剖析机器学习知识体系&#xff0c;从基本概念、学习方式&#xff0c;到分类算法、逻辑回归等关键内容均有涉及。详细阐述各知识点原理与应用场景&#xff0c;并对比多种算法的优劣。 关键词&#xff1a;机器学习&#xff1b;监督学习&#xff1b;分类算法&#x…...

编程日记 2025/11/28 23:08:43

开发工具-jetbrains使用技巧

更详细的可以看 狂神说Java】JavaWeb入门到实战 p6 idea中maven的操作 可以设置怎么调试 然后还可以wsl、远程方式等运行 maven 这里的相当于cmd的操作 命令行去执行这些东西...

编程日记 2026/1/21 9:52:35

HarmonyOS：页面滚动时标题悬浮、背景渐变

一、需求场景 进入到app首页或者分页列表首页时&#xff0c;随着页面滚动&#xff0c;分类tab要求固定悬浮在顶部。进入到app首页、者分页列表首页、商品详情页时&#xff0c;页面滚动时&#xff0c;顶部导航栏&#xff08;菜单、标题&#xff09;背景渐变。 二、相关技术知识点…...

编程日记 2026/1/21 8:59:55

Python——Matplotlib库的练习

1、 import matplotlib.pyplot as plt import numpy as npx np.linspace(0,2*np.pi,100) y1 np.sin(x) y2 np.cos(x)plt.plot(x,y1,"r--o",linewidth1.5,markersize6) plt.plot(x,y2,"g-s",linewidth2,markersize8)plt.show() 2、 import matplotlib…...

编程日记 2025/11/28 0:04:44

信息系统项目管理师-第十八章-项目绩效域

本文章记录学习过程中，重要的知识点，是否为重点的依据，来源于官方教材和历年考题，持续更新共勉 本文章记录学习过程中，重要的知识点，是否为重点的依据，来源于官方教材和历年考题，持续更新共勉 在整个生命周期过程中，项目管理者需要始终坚持项目管理原则，通过涵盖 10 …...

编程日记 2026/1/21 19:18:51

Windows 操作系统 - Windows 10 磁盘管理无法为 C 盘选择扩展卷

Windows 10 磁盘管理无法为 C 盘选择扩展卷 在 Windows 10 的磁盘管理中&#xff0c;无法为 C 盘选择扩展卷&#xff08;选项灰色不可用&#xff09;&#xff0c;主要原因是未分配空间没有紧邻 C 盘的右侧 补充&#xff1a;Windows 10 磁盘管理打开方式 1. 按下快捷键【Win …...

编程日记 2025/11/27 4:07:42

[NOIP 2003 普及组] 栈 Java

import java.io.*;public class Main {public static void main(String[] args) throws IOException {BufferedReader br new BufferedReader(new InputStreamReader(System.in));int n Integer.parseInt(br.readLine());int[] dp new int[n 1];dp[0] 1; // 空序列只有一种…...

编程日记 2026/1/21 17:02:46

C++ （类的设计，对象的创建，this指针，构造函数）

类的设计 C对结构体是有增强的 可以包含函数作为结构体成员 可以直接定义变量 在结构体成员函数里面可以直接访问结构体成员变量 struct student{string name;int age;float score;void play_game(const string &name);}void student::play_game(const string game){}…...

编程日记 2025/12/31 1:12:17

笔记：代码随想录算法训练营day67:Floyd 算法精讲、A * 算法精讲 （A star算法） 严重超时完结，不过，撒花

学习资料&#xff1a;代码随想录 Floyd 算法精讲 卡码网&#xff1a;97. 小明逛公园 首先明确floyd算法解决的是多源最短路径问题&#xff0c;对边的权的正负值没有要求&#xff0c;而且是动态规划的思想 五部曲&#xff1a; 定义&#xff1a;grid[i][j][k]表示从i出发到j…...

编程日记 2025/12/29 22:16:20

面试篇 - Transformer模型中的位置编码

1. 位置编码的引入 背景&#xff1a;Transformer模型通过自注意力机制&#xff08;Self-Attention&#xff09;处理序列数据&#xff0c;但自注意力机制本身并不包含序列中元素的位置信息。因此&#xff0c;需要一种方法来为模型提供位置信息。 解决方案&#xff1a;位置编码&…...

编程日记 2026/1/21 15:53:13

蓝桥杯篇---客观题

文章目录 前言 前言 本文简单介绍了蓝桥杯中客观题各个部分的知识点。 一、单片机相关 IAP15F2K61S2单片机的定时器0具有4种工作模式&#xff0c;当采用外部12MHz晶振时&#xff0c;定时器最大定时长度65535us。8051单片机的P0口&#xff0c;当使用外部存储器时它是一个传输低…...

编程日记 2025/12/23 13:17:08

ES6 新增特性 箭头函数

简述&#xff1a; ECMAScript 6&#xff08;简称ES6&#xff09;是于2015年6月正式发布的JavaScript语言的标准&#xff0c;正式名为ECMAScript 2015&#xff08;ES2015&#xff09;。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序&#xff0c;成为企业级开发语…...

编程日记 2025/11/26 22:39:18

Javaweb后端 maven高级 maven聚合

聚合用modules...

编程日记 2026/1/21 10:59:04

vue+flask图书知识图谱推荐系统

文章结尾部分有CSDN官方提供的学长 联系方式名片 文章结尾部分有CSDN官方提供的学长 联系方式名片 关注B站&#xff0c;有好处&#xff01; 编号: F025 架构: vueflaskneo4jmysql 亮点&#xff1a;协同过滤推荐算法知识图谱可视化 支持爬取图书数据&#xff0c;数据超过万条&am…...

编程日记 2026/1/21 15:02:41

vue2 走马灯 展示多个

使用 npm install “swiper”: “^11.2.4”, 在这里插入代码片 <template><section class"swiper pc-banner"><div class"swiper-container"><div class"swiper-wrapper"><div v-for"(item, index) in swiperD…...

编程日记 2026/1/22 7:12:04

《MySQL从入门到精通》

文章目录 《MySQL从入门到精通》1. 基础-SQL通用语法及分类2. 基础-SQL-DDL-数据库操作3. 基础-SQL-DDL-表操作-创建&查询4. 基础-SQL-DDL-数据类型及案例4.1 数值类型4.2 字符串类型4.3 时间和日期类型 5. 基础-SQL-DDL-表操作-修改&删除5.1 DDL-表操作-修改5.2 DDL-表…...

编程日记 2026/1/21 20:18:54

Linux: 线程同步

目录 一 前言 二 线程饥饿 三 线程同步 四 条件变量 1. cond &#xff08; condition&#xff09; 2. pthread_cond_wait() &#xff1a; 3. pthread_cond_signal() 五 条件变量的使用 一 前言 在上篇文章Linux : 多线程互斥-CSDN博客我们讲解了线程互斥的概念&#xff…...

编程日记 2026/1/21 17:20:29

golang-context详解

Context是什么 cancel 其实就是通过chan select进行提前中断返回 如果没有context&#xff0c;携程之间怎么做这些交互呢&#xff1f;肯定也能做 跨线程通讯如共享内存&#xff0c;pipe等等都可以做到&#xff0c;但是就需要开发者对通讯设计建模、规划数据同步方式等&#xf…...

编程日记 2026/1/21 11:39:36

python蓝桥杯备赛常用算法模板

一、python基础 &#xff08;一&#xff09;集合操作 s1 {1,2,3} s2{3,4,5} print(s1|s2)#求并集 print(s1&s2)#求交集 #结果 #{1, 2, 3, 4, 5} #{3}&#xff08;二&#xff09;对多维列表排序 1.新建列表 list1[[1,2,3],[2,3,4],[0,3,2]] #提取每个小列表的下标为2的…...

编程日记 2026/1/11 3:28:35

Spring Boot 集成 RocketMQ 全流程指南：从依赖引入到消息收发

前言 在分布式系统中&#xff0c;消息中间件是解耦服务、实现异步通信的核心组件。RocketMQ 作为阿里巴巴开源的高性能分布式消息中间件&#xff0c;凭借其高吞吐、低延迟、高可靠等特性&#xff0c;成为企业级应用的首选。而 Spring Boot 通过其“约定优于配置”的设计理念&a…...

编程日记 2026/1/21 8:55:06

AI与我共创WEB界面

记录一次压测后的自我技术提升 这事儿得从机房停电说起。那天吭哧吭哧做完并发压测，正准备截Zabbix监控图写报告，突然发现监控曲线神秘失踪——系统组小哥挠着头说：“上次停电后，zabbix服务好像就没起来过…” 我盯着空荡荡的图表界面，大脑的CPU温度可能比服务器还高。 其…...

编程日记 2026/1/21 9:52:25

基于 `Gradio` 的聊天机器人界面

这段代码实现了一个基于 Gradio 的聊天机器人界面&#xff0c;并使用了 langchain 和 ChatGLM 作为后端模型支持。以下是对代码的详细解释&#xff1a; 1. 导入必要的库 import gradio as grfrom langchain_community.llms import ChatGLM from langchain.chains import Conve…...

编程日记 2026/1/19 9:41:56