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

HTML创意动画代码

news 2026/3/29 19:40:39

目录

    • 1、动态气泡背景
    • 2、创意文字
    • 3、旋转立方体

1、动态气泡背景

请添加图片描述

<!DOCTYPE html>
<html>
<head><title>Bubble Background</title><style>body {margin: 0;padding: 0;height: 100vh;background: #222;display: flex;flex-direction: column;align-items: center;justify-content: center;overflow: hidden;}canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}h1 {color: white;font-size: 4rem;z-index: 1;}</style>
</head>
<body><canvas id="canvas"></canvas><h1>Hello Boy!</h1><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");canvas.width = window.innerWidth;canvas.height = window.innerHeight;class Bubble {constructor(x, y, radius, color) {this.x = x;this.y = y;this.radius = radius;this.color = color;this.dx = Math.random() - 0.5;this.dy = Math.random() - 0.5;this.speed = Math.random() * 5 + 1;}draw() {ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);ctx.fillStyle = this.color;ctx.fill();}update() {if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {this.dx = -this.dx;}if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {this.dy = -this.dy;}this.x += this.dx * this.speed;this.y += this.dy * this.speed;}}const bubbles = [];function init() {for (let i = 0; i < 50; i++) {const radius = Math.random() * 50 + 10;const x = Math.random() * (canvas.width - radius * 2) + radius;const y = Math.random() * (canvas.height - radius * 2) + radius;const color = `hsla(${Math.random() * 360}, 100%, 50%, 0.8)`;bubbles.push(new Bubble(x, y, radius, color));}}function animate() {requestAnimationFrame(animate);ctx.clearRect(0, 0, canvas.width, canvas.height);bubbles.forEach((bubble) => {bubble.draw();bubble.update();});}init();animate();</script>
</body>
</html>

这个代码使用了 Canvas 技术，创建了一个随机生成的气泡背景并且让气泡动态漂浮，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改气泡的数量、大小、颜色，以及运动的方式等等。

2、创意文字

请添加图片描述

<!DOCTYPE html>
<html>
<head><title>Rainbow Text</title><style>body {background: black;color: white;font-family: 'Open Sans', sans-serif;text-align: center;height: 100%;display: flex;flex-direction: column;justify-content: center;}h1 {font-size: 8em;margin: 100px auto;animation: rainbow 5s ease-in-out infinite;}@keyframes rainbow {0% {color: #ff0000;text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;}25% {color: #ff8000;text-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000, 0 0 30px #ff8000;}50% {color: #ffff00;text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00;}75% {color: #00ff00;text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;}100% {color: #0000ff;text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff;}}</style>
</head>
<body><h1>Hello Girl</h1>
</body>
</html>

这个代码使用了 CSS 的动画和阴影特效，让页面中的文字在红、橙、黄、绿、蓝五种颜色之间不断变化，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改文字的大小、样式、颜色，以及变化的频率和方式等等。

3、旋转立方体

请添加图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>旋转立方体</title><style>#cube {width: 200px;height: 200px;position: relative;transform-style: preserve-3d;animation: rotate 6s infinite linear;margin: 100px auto;}#cube div {position: absolute;width: 200px;height: 200px;background-color: rgba(0, 255, 255, 0.5);border: 2px solid #333;}#cube .front {transform: translateZ(100px);}#cube .back {transform: rotateY(180deg) translateZ(100px);}#cube .right {transform: rotateY(90deg) translateZ(100px);}#cube .left {transform: rotateY(-90deg) translateZ(100px);}#cube .top {transform: rotateX(90deg) translateZ(100px);}#cube .bottom {transform: rotateX(-90deg) translateZ(100px);}@keyframes rotate {0% {transform: rotateX(0) rotateY(0) rotateZ(0);}100% {transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}</style></head><body><div id="cube"><div class="front"></div><div class="back"></div><div class="right"></div><div class="left"></div><div class="top"></div><div class="bottom"></div></div><script>const cube = document.querySelector('#cube');let isPaused = false;cube.addEventListener('mouseover', () => {isPaused = true;cube.style.animationPlayState = 'paused';});cube.addEventListener('mouseout', () => {isPaused = false;cube.style.animationPlayState = 'running';});setInterval(() => {if (!isPaused) {cube.style.animationPlayState = 'running';}}, 1000);</script></body>
</html>

该示例中，我们使用了 transform-style: preserve-3d 属性来创建 3D 空间通过对立方体不同面的旋转实现了立方体的旋转效果。我们还使用了 CSS 动来实现无限循环的旋转效果，并使用 JavaScript 实现了当鼠标悬停在立方体上时暂停动画的交互效果。

相关文章：

HTML创意动画代码

目录1、动态气泡背景2、创意文字3、旋转立方体1、动态气泡背景 <!DOCTYPE html> <html> <head><title>Bubble Background</title><style>body {margin: 0;padding: 0;height: 100vh;background: #222;display: flex;flex-direction: colum…...

编程日记 2023/2/26 17:19:43

软工第一次个人作业——阅读和提问

软工第一次个人作业——阅读和提问 项目内容这个作业属于哪个课程2023北航敏捷软件工程这个作业的要求在哪里个人作业-阅读和提问我在这个课程的目标是体验敏捷开发过程&#xff0c;掌握一些开发技能&#xff0c;为进一步发展作铺垫这个作业在哪个具体方面帮助我实现目标对本课…...

编程日记 2023/2/26 17:18:37

urho3d的自定义文件格式

Urho3D尽可能使用现有文件格式&#xff0c;仅在绝对必要时才定义自定义文件格式。当前使用的自定义文件格式有&#xff1a; 二进制模型格式&#xff08;.mdl&#xff09; Model geometry and vertex morph data byte[4] Identifier "UMDL" or "UMD2" …...

编程日记 2023/2/26 17:17:30

spark第一章：环境安装

系列文章目录 spark第一章&#xff1a;环境安装 文章目录系列文章目录前言一、文件准备1.文件上传2.文件解压3.修改配置4.启动环境二、历史服务器1.修改配置2.启动历史服务器总结前言 spark在大数据环境的重要程度就不必细说了&#xff0c;直接开始吧。 一、文件准备 1.文件…...

编程日记 2023/2/26 17:16:24

MySQL---存储过程与存储函数的相关概念

MySQL—存储过程与存储函数的相关概念 存储函数和存储过程的主要区别&#xff1a; 存储函数一定会有返回值的存储过程不一定有返回值 存储过程和函数能后将复杂的SQL逻辑封装在一起&#xff0c;应用程序无需关注存储过程和函数内部复杂的SQL逻辑&#xff0c;而只需要简单地调…...

编程日记 2023/2/26 17:15:17

PMP值得考吗？

第一&#xff0c;PMP的价值体现 1、PMP是管理岗位必考证书。 多数企业会选择优先录用持PMP证书的管理人才&#xff0c;PMP成为管理岗位的必考证书。PMP在很多外企和国内中大型企业非常受重视&#xff0c;中石油、中海油、华为等等都会给内部员工做培训。 这些机构对项目管理…...

编程日记 2023/2/26 17:14:10

Quartus 报错汇总（持续更新...）

1、Error (10663): Verilog HDL Port Connection error at top_rom.v(70): output or inout port "stcp" must be connected to a structural net expression输出变量stcp在原设计文件中已经定义为reg型&#xff0c;在实例化时不能再定义为reg型&#xff0c;而应该是…...

编程日记 2023/2/26 17:13:03

Netty权威指南总结（一）

一、为什么选择Netty&#xff1a;API使用简单&#xff0c;开发门槛低&#xff0c;屏蔽了NIO通信的底层细节。功能强大&#xff0c;预制了很多种编解码功能&#xff0c;支持主流协议。定制能力强&#xff0c;可以通过ChannelHandler对通信框架进行灵活地拓展。性能高、成熟、稳定…...

编程日记 2023/2/26 17:11:53

Elasticsearch：如何轻松安全地对实时 Elasticsearch 索引重新索引你的数据

在很多的时候&#xff0c;由于一些需求&#xff0c;我们不得不修改索引的映射&#xff0c;也即 mapping&#xff0c;这个时候我们需要重新索引&#xff08;reindex&#xff09;来把之前的数据索引到新的索引中。槽糕的是&#xff0c;我们的这个索引还在不断地收集实时数据&…...

编程日记 2023/2/26 17:10:45

【算法笔记】前缀和与差分

第一课前缀和与差分 算法是解决问题的方法与步骤。 在看一个算法是否优秀时&#xff0c;我们一般都要考虑一个算法的时间复杂度和空间复杂度。 现在随着空间越来越大&#xff0c;时间复杂度成为了一个算法的重要指标&#xff0c;那么如何估计一个算法的时间复杂度呢&#xf…...

编程日记 2023/2/26 17:09:39

python实战应用讲解-【实战应用篇】函数式编程-八皇后问题（附示例代码）

目录 知识储备-迭代器相关模块 itertools 模块 创建新的迭代器 根据最短输入序列长度停止的迭代器...

编程日记 2023/2/26 17:08:31

【Servlet篇】如何解决Request请求中文乱码的问题？

前言 前面一篇文章我们探讨了 Servlet 中的 Request 对象&#xff0c;Request 请求对象中封装了请求数据&#xff0c;使用相应的 API 就可以获取请求参数。 【Servlet篇】一文带你读懂 Request 对象 也许有小伙伴已经发现了前面的方式获取请求参数时&#xff0c;会出现中文乱…...

编程日记 2023/2/26 17:07:24

SpringBoot：SpringBoot简介与快速入门（1）

SpringBoot快速入门1. SpringBoot简介2. SpringBoot快速入门2.1 创建SpringBoot项目&#xff08;必须联网&#xff0c;要不然创建失败&#xff0c;在模块3会讲到原因&#xff09;2.2 编写对应的Controller类2.3 启动测试3. Spring官网构建工程4. SpringBoot工程快速启动4.1 为什…...

编程日记 2023/2/26 17:06:17

RabbitMQ学习（十一）：RabbitMQ 集群

一、集群1.1 为什么要使用集群前面我们介绍了如何安装及运行 RabbitMQ 服务&#xff0c;不过这些是单机版的&#xff0c;无法满足目前真实应用的 要求。如果 RabbitMQ 服务器遇到内存崩溃、机器掉电或者主板故障等情况&#xff0c;该怎么办&#xff1f;单台 RabbitMQ 服务器可以…...

编程日记 2023/2/26 17:05:10

学渣适用版——Transformer理论和代码以及注意力机制attention的学习

参考一篇玩具级别不错的代码和案例 自注意力机制 注意力机制是为了transform打基础。 参考这个自注意力机制的讲解流程很详细&#xff0c; 但是学渣一般不知道 key&#xff0c;query&#xff0c;value是啥。 结合B站和GPT理解 注意力机制是一种常见的神经网络结构&#xff0…...

编程日记 2023/2/26 17:04:04

网上这么多IT的培训机构，我们该怎么选？

说实话&#xff0c;千万不要把这个答案放在网上来找&#xff0c;因为你只能得到别人觉得合适的或者机构的广告&#xff1b;当然个人的培训经历可以听一听的&#xff0c;毕竟不靠谱的机构也有&#xff0c;比如让你交一两万去上线上课程或者一百号来人坐一起看视频&#xff0c;这…...

编程日记 2023/2/26 17:02:57

数据结构与算法—跳表（skiplist）

目录 前言 跳表 查询时间分析 1、时间复杂度 o(logn) 2、空间复杂度O(n) 动态插入和删除 跳表动态更新 跳表与红黑树比较 跳表实现 前言 二分查找用的数组 链表可不可以实现二分查找呢&#xff1f; 跳表 各方面性能比较优秀的动态数据结构&#xff0c;可以支持快速…...

编程日记 2023/2/26 17:01:51

【C++】5.C/C++内存管理

1.C/C内存管理 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] {1, 2, 3, 4};char char2[] "abcd";char* pChar3 "abcd";int* ptr1 (int*)malloc(sizeof (int)*4);int* ptr2 …...

编程日记 2023/2/26 17:00:46

一文让你彻底理解关于消息队列的使用

一、消息队列概述 消息队列中间件是分布式系统中重要的组件&#xff0c;主要解决应用解耦&#xff0c;异步消息&#xff0c;流量削锋等问题&#xff0c;实现高性能&#xff0c;高可用&#xff0c;可伸缩和最终一致性架构。目前使用较多的消息队列有ActiveMQ&#xff0c;Rabbit…...

编程日记 2023/2/26 16:59:40

条件期望3

条件期望例题—连续发生的事情 连续地做二项实验, 每一次成功概率为p. 当连续k次成功时, 停止实验. 求停止实验时做的总实验次数的期望. 解: 错误解法 设NkN_kNk​为停止实验时做的总实验次数, 则 E[Nk]E[E[Nk∣Nk−1]]∑jk−1∞E[Nk∣Nk−1j]\begin{split} E[N_k] & E[E…...

编程日记 2023/2/26 16:58:32

Java开发者必看：Lingbot深度模型服务端集成与高并发处理

Java开发者必看&#xff1a;Lingbot深度模型服务端集成与高并发处理 最近和几个做Java后端的朋友聊天&#xff0c;发现大家对接AI模型服务时&#xff0c;都遇到了类似的头疼事。模型本身效果不错&#xff0c;但一集成到自己的Spring Boot项目里&#xff0c;特别是流量稍微大点…...

编程新知 2026/3/29 18:43:30

别再傻傻分不清！Word里‘分页符’和‘分节符’到底怎么用？一个表格横竖混排的实战案例讲透

别再傻傻分不清&#xff01;Word里‘分页符’和‘分节符’到底怎么用&#xff1f;一个表格横竖混排的实战案例讲透 每次做季度报告时&#xff0c;最让我头疼的就是那些超宽的表格——明明数据很重要&#xff0c;却因为页面宽度不够&#xff0c;硬生生被挤成密密麻麻的小字&…...

编程新知 2026/3/29 16:48:29

Cataclysm: Dark Days Ahead - 在末日废土中生存的终极指南

Cataclysm: Dark Days Ahead - 在末日废土中生存的终极指南 【免费下载链接】Cataclysm-DDA Cataclysm - Dark Days Ahead. A turn-based survival game set in a post-apocalyptic world. 项目地址: https://gitcode.com/GitHub_Trending/ca/Cataclysm-DDA 欢迎来到Cat…...

编程新知 2026/3/29 15:38:02

5个技巧让普通鼠标在Mac上秒变专业工具：Mac Mouse Fix深度解析

5个技巧让普通鼠标在Mac上秒变专业工具&#xff1a;Mac Mouse Fix深度解析 【免费下载链接】mac-mouse-fix Mac Mouse Fix - A simple way to make your mouse better. 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix 你是否曾为Mac上的鼠标体验感到沮…...

编程新知 2026/3/29 15:23:54

MOOTDX：Python通达信数据接口的量化投资解决方案

MOOTDX&#xff1a;Python通达信数据接口的量化投资解决方案 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx MOOTDX是一个基于Python的通达信数据接口封装库&#xff0c;为量化投资研究者和股票数…...

编程新知 2026/3/29 15:21:54

基于Node.js构建HunyuanVideo-Foley模型调度与管理中间件

基于Node.js构建HunyuanVideo-Foley模型调度与管理中间件 1. 引言&#xff1a;音效生成服务的挑战与机遇 在视频制作和游戏开发领域&#xff0c;高质量的音效生成(HunyuanVideo-Foley)已成为提升作品沉浸感的关键要素。随着AI模型能力的提升&#xff0c;单个音效生成请求的处…...

编程新知 2026/3/29 13:18:33

NSSM神器：一键将任意应用注册为Windows服务并实现日志自动分割

NSSM实战指南&#xff1a;将Windows应用转化为可靠系统服务的完整方案 在Windows服务器运维和开发过程中&#xff0c;我们经常需要确保关键应用程序能够持续稳定运行&#xff0c;即使系统重启或用户注销也不受影响。传统方式下&#xff0c;开发者通常需要编写复杂的服务包装代码…...

编程新知 2026/3/29 11:49:43

中国象棋AlphaZero：零基础构建超越人类棋力的AI对战系统

中国象棋AlphaZero&#xff1a;零基础构建超越人类棋力的AI对战系统 【免费下载链接】ChineseChess-AlphaZero Implement AlphaZero/AlphaGo Zero methods on Chinese chess. 项目地址: https://gitcode.com/gh_mirrors/ch/ChineseChess-AlphaZero 中国象棋AlphaZero是一…...

编程新知 2026/3/29 11:47:42

OpenClaw性能对比：GLM-4.7-Flash与其他模型实测数据

OpenClaw性能对比&#xff1a;GLM-4.7-Flash与其他模型实测数据 1. 测试背景与实验设计 最近在优化个人自动化工作流时&#xff0c;我注意到OpenClaw对不同大模型的表现差异显著。特别是当任务链较长时&#xff0c;模型响应速度和稳定性直接影响最终效果。本次测试聚焦于GLM-…...

编程新知 2026/3/29 11:03:08

CAPL调用DLL实现UDS 27服务加密算法：从C代码到Vector环境的完整打通

CAPL调用DLL实现UDS 27服务加密算法&#xff1a;从C代码到Vector环境的完整打通 在汽车电子测试领域&#xff0c;UDS&#xff08;Unified Diagnostic Services&#xff09;协议的安全访问&#xff08;27服务&#xff09;是保护ECU免受未授权访问的关键机制。当我们需要在Vector…...

编程新知 2026/3/29 10:59:05