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

Merry Christmas HTML

news 2025/9/18 1:12:52

简单分享 Merry Christmas HTML 设计的核心代码

HTML:

<body class="card">
<div class="dialog"><div class="dialog-in"><div class="dialog-msg"><div class="heading">You've got a post card!</div><a class="play" onclick="openCard()">View</a></div></div></div><div class="header"><div class="heading">Merry Christmas!</div></div><div class="deer"><img class="deer-body" src="img/deer-body.png" alt=""><img class="deer-left-hand" src="img/deer-left-hand.png" alt=""><img class="deer-gift3" src="img/deer-gift3.png" alt=""><img class="deer-gift2" src="img/deer-gift2.png" alt=""><img class="deer-gift1" src="img/deer-gift1.png" alt=""><img class="deer-scarf" src="img/deer-scarf.png" alt=""><img class="deer-right-hand" src="img/deer-right-hand.png" alt="" ><img class="deer-left-leg" src="img/deer-left-leg.png" alt=""><img class="deer-right-leg" src="img/deer-right-leg.png" alt=""></div><div class="penguin"><div class="peng-left-hand">     <img class="peng-letter" src="img/peng-letter.png" alt=""><img class="peng-left-hand-pic" src="img/peng-left-hand.png" alt=""></div><img class="peng-right-hand" src="img/peng-right-hand.png" alt=""><img class="peng-body" src="img/peng-body.png" alt=""></div><div class="santa"><img class="santa-body" src="img/santa-body.png" alt=""><img class="santa-left-hand" src="img/santa-left-hand.png" alt=""><img class="santa-right-hand" src="img/santa-right-hand.png" alt=""><div class="santa-baloon"><img class="baloon" src="img/santa-baloon.png" alt=""><div class="santa-text"></div></div> <img class="santa-left-leg" src="img/santa-left-leg.png" alt=""><img class="santa-right-leg" src="img/santa-right-leg.png" alt=""></div><div class="dwarf"><img class="dwarf-body" src="img/dwarf-body.png" alt=""><img class="dwarf-left-leg" src="img/dwarf-left-leg.png" alt=""><img class="dwarf-right-leg" src="img/dwarf-right-leg.png" alt=""><img class="dwarf-box" src="img/dwarf-box.png" alt=""></div><audio src="mp3/music.mp3" class="music" autoplay loop></audio><canvas id="canvas"></canvas><script src="js/fireworks.js"></script><script>
function openCard(){document.querySelector('.dialog').style.display = 'none';document.querySelector('.music').play();fireworks();document.querySelector('body').classList.add('active');}
</script></body>

CSS:

:root {--size: 200px;--size-md: 150px;--size-sm: 120px;}*{box-sizing: border-box;
}img{max-width: 100%;
}body,html{height: 100%;overflow: hidden;
}
body{background-image: url('../img/bg.jpg');background-position: center center;background-size: cover;background-color: rgb(167, 232, 243);margin: 0;text-align: center;font-family: 'Playfair Display SC', serif;
}.dialog{display: table;
position: absolute;
background-color: rgba(0,0,0,0.9);
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
}.dialog-in{
display: table-cell;
vertical-align: middle;
}.heading{
color:  rgb(245, 32, 103);
font-size: 50px;
margin: 50px 0;
}.play{display: inline-block;text-decoration: none;padding: 10px 20px;background-color: rgb(245, 32, 103);border-radius: 30px;color: #fff;cursor: pointer;
}.deer{position: absolute;width: var(--size);bottom: 30%;left: 50%;margin-left: 5%;
}
.active .deer{animation: deer-body 4s ease-in-out infinite;}@keyframes deer-body{0%{bottom: -40%;}50%{bottom: 40%;transform: rotate(-20deg);}100%{bottom: -40%;}
}.deer-body{position: relative;z-index: 1;
}.deer-left-hand{position: absolute;width: 30%;top: 59%;left: -15%;transform-origin: 100% 80%;
}
@keyframes deer-lh{0%{transform: rotate(-20deg);}30%{transform: rotate(-20deg);}50%{transform: rotate(10deg);}100%{transform: rotate(10deg);}
}.active .deer-left-hand{animation: deer-lh 4s ease-in-out infinite; 
}.deer-gift3{position: absolute;width: 50%;top: 25%;left: -31%;
}.active .deer-gift3{animation: deer-gift3 4s ease-in-out infinite; 
}@keyframes deer-gift3{0%{top: 35%;}30%{top: 35%;}50%{top: 15%;}60%{top: 20%;}100%{top: 20%;}
}.peng-left-hand-pic{position: relative;
}
.peng-left-hand{position: absolute;width: 30%;top: 12%;left: 0;transform-origin: 100% 100%;
}.active .peng-left-hand{animation: peng-lh 4s ease-in-out infinite;
}@keyframes peng-lh{30%{transform: rotate(30deg);}35%{transform: rotate(-30deg);}40%{transform: rotate(30deg);}45%{transform: rotate(-30deg);}50%{transform: rotate(30deg);}55%{transform: rotate(-30deg);}60%{transform: rotate(30deg);}
}.peng-letter{position: absolute;width: 100%;bottom: 70%;right: 10%;
}.peng-right-hand{position: absolute;width: 30%;top: 62%;left: 82%;
}.santa{position: absolute;width: var(--size);bottom: 30%;right: 50%;margin-right: 5%;transform-origin: 120% 0;transform: rotate(-10deg);
}.active .santa{animation: santa-body 4s linear infinite, santa-body-swing 2s linear infinite;
}@keyframes santa-body-swing{50%{transform: rotate(-30deg);}
}
@keyframes santa-body{25%{bottom: 20%;}50%{right: 60%;bottom: 25%;}75%{bottom: 30%;right: 55%;}
}

JS:

function fireworks() {var canvas = document.querySelector('#canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;var ctx = canvas.getContext('2d');// initctx.fillStyle = 'transparent';// ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.clearRect(0, 0, canvas.width, canvas.height);// objectsvar listFire = [];var listFirework = [];var fireNumber = 10;var center = {x: canvas.width / 2,y: canvas.height / 2};var range = window.innerWidth / 3;for (var i = 0; i < fireNumber; i++) {var fire = {x: Math.random() * range / 2 - range / 4 + center.x,y: Math.random() * range * 2 + canvas.height,size: Math.random() + 0.5,fill: '#fd1',vx: Math.random() - 0.5,vy: -(Math.random() + 4),ax: Math.random() * 0.02 - 0.01,far: Math.random() * range + (center.y - range)};fire.base = {x: fire.x,y: fire.y,vx: fire.vx};//listFire.push(fire);}function randColor() {var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);var color = 'rgb($r, $g, $b)';color = color.replace('$r', r);color = color.replace('$g', g);color = color.replace('$b', b);return color;}(function loop() {requestAnimationFrame(loop);update();draw();})();function update() {for (var i = 0; i < listFire.length; i++) {var fire = listFire[i];//if (fire.y <= fire.far) {// case add fireworkvar color = randColor();for (var i = 0; i < fireNumber * 5; i++) {var firework = {x: fire.x,y: fire.y,size: Math.random() + 1.5,fill: color,vx: Math.random() * 5 - 2.5,vy: Math.random() * -5 + 1.5,ay: 0.05,alpha: 1,life: Math.round(Math.random() * range / 2) + range / 2};firework.base = {life: firework.life,size: firework.size};listFirework.push(firework);}// resetfire.y = fire.base.y;fire.x = fire.base.x;fire.vx = fire.base.vx;fire.ax = Math.random() * 0.02 - 0.01;}//fire.x += fire.vx;fire.y += fire.vy;fire.vx += fire.ax;}for (var i = listFirework.length - 1; i >= 0; i--) {var firework = listFirework[i];if (firework) {firework.x += firework.vx;firework.y += firework.vy;firework.vy += firework.ay;firework.alpha = firework.life / firework.base.life;firework.size = firework.alpha * firework.base.size;firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;//firework.life--;if (firework.life <= 0) {listFirework.splice(i, 1);}}}}function draw() {// clearctx.globalCompositeOperation = 'source-over';ctx.globalAlpha = 0.18;ctx.fillStyle = 'transparent';// ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.clearRect(0, 0, canvas.width, canvas.height);// re-drawctx.globalCompositeOperation = 'screen';ctx.globalAlpha = 1;for (var i = 0; i < listFire.length; i++) {var fire = listFire[i];ctx.beginPath();ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);ctx.closePath();ctx.fillStyle = fire.fill;ctx.fill();}for (var i = 0; i < listFirework.length; i++) {var firework = listFirework[i];ctx.globalAlpha = firework.alpha;ctx.beginPath();ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);ctx.closePath();ctx.fillStyle = firework.fill;ctx.fill();}}}

效果如下：

Merry Christmas 2024

Merry Christmas HTML

简单分享 Merry Christmas HTML 设计的核心代码 HTML: <body class"card"> <div class"dialog"><div class"dialog-in"><div class"dialog-msg"><div class"heading">Youve got a post card!…...

编程日记 2024/12/29 13:57:36

JavaScript甘特图 dhtmlx-gantt

背景需求是在后台中，需要用甘特图去展示管理任务相关视图，并且不用依赖vue，兼容JavaScript原生开发。最终使用dhtmlx-gantt，一个半开源的库，基础功能免费，更多功能付费。甘特图需求如图： 调…...

编程日记 2024/12/29 13:54:33

阿里云-将旧服务器数据与配置完全迁移至新服务器

文章目录一：创建镜像二：将创建好的镜像复制到新服务器所在的目标地域（如果新服务器与镜像在同一地域就不用进行这一操作）三：将镜像配置到新服务器上四：导出安全组（如果新服务器与旧服务器使用同…...

编程日记 2024/12/29 13:53:32

以EM算法为例介绍坐标上升（Coordinate Ascent）算法：中英双语

中文版什么是 Coordinate Ascent 算法？ Coordinate Ascent（坐标上升）是一种优化算法，它通过在每次迭代时优化一个变量（或一个坐标），并保持其他变量不变，逐步逼近最优解。与坐标下…...

编程日记 2024/12/29 13:52:31

Spark生态圈

Spark 主要用于替代Hadoop中的 MapReduce 计算模型。存储依然可以使用 HDFS，但是中间结果可以存放在内存中；调度可以使用 Spark 内置的，也可以使用更成熟的调度系统 YARN 等。 Spark有完善的生态圈： Spark Core：实现了…...

编程日记 2024/12/29 13:48:27

CSDN编辑器

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…...

编程日记 2024/12/29 13:43:21

【信息系统项目管理师】高分论文：论信息系统项目的资源管理（智慧储电站系统）

更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录论文1、规划资源管理2、估算活动资源3、获取资源4、建设团队5、管理团队6、控制资源论文根据国家2030年前碳达峰行动方案，提出全面推进风电、太阳能发电大规模开发和高质量发展。XX地国家电网启动了“数字李…...

编程日记 2024/12/29 13:42:20

Web开发：ORM框架之使用Freesql的分表分页写法

一、自动分表（高版本可用） 特性写法 //假如是按月分表：[Table(Name "log_{yyyyMM}", AsTable "createtime2022-1-1(1 month)")]注意：①需包含log_202201这张表 ②递增规律是一个月一次，确保他们…...

编程日记 2024/12/29 13:41:19

Unity功能模块一对话系统（1）前置准备

也许你也曾被游戏中的对话系统深深吸引，那些精心设计的对白、鲜活的角色配音、甚至是简单的文字对话，往往能让玩家产生强烈的代入感和情感共鸣。如果你正在开发一款游戏，或者计划为你的项目加入一个引人入胜的对话系统，那么 Unity…...

编程日记 2024/12/29 13:40:18

strrchr的概念和使用案例

strrchr 是 C 语言标准库中的一个函数，用于在字符串中查找最后一次出现的字符，并返回指向该字符的指针。概念： strrchr 函数在给定的字符串中从末尾开始搜索指定的字符，返回一个指向该字符最后一次出现的指针。如果字符在字符串…...

编程日记 2024/12/29 13:39:16

缓存管理自动化：JuiceFS 企业版 Cache Group Operator 新特性发布

近期，JuiceFS 企业版推出了 Cache Group Operator，用于自动化创建和管理缓存组集群。Operator 是一种简化 Kubernetes 应用管理的工具，它能够自动化应用程序的生命周期管理任务，使部署、扩展和运维更加高效。在推出 Operator 之前…...

编程日记 2024/12/29 13:37:12

C++ 并发专题 - 实现一个线程安全的队列

一：概述本文利用 C 标准库中的多线程、条件变量、互斥锁等工具来实现一个线程安全的队列，并且使用多个线程来向队列中添加和获取数据。二：实现过程： #include <iostream> #include <queue> #include <mutex&g…...

编程日记 2024/12/29 13:33:07

SQL 基础教程

SQL 是用于访问和处理数据库的标准的计算机语言。在本教程中，您将学到如何使用 SQL 访问和处理数据系统中的数据，这类数据库包括：Oracle, Sybase, SQL Server, DB2, Access 等等。 SQL 是用于访问和处理数据库的标准的计算机语言。什么是…...

编程日记 2024/12/29 13:32:06

【源码】Sharding-JDBC源码分析之SQL中影子库ShadowSQLRouter路由的原理

Sharding-JDBC系列 1、Sharding-JDBC分库分表的基本使用 2、Sharding-JDBC分库分表之SpringBoot分片策略 3、Sharding-JDBC分库分表之SpringBoot主从配置 4、SpringBoot集成Sharding-JDBC-5.3.0分库分表 5、SpringBoot集成Sharding-JDBC-5.3.0实现按月动态建表分表 6、【…...

编程日记 2024/12/29 13:31:05

雷池 WAF 搭配阿里云 CDN 使用教程

雷池 WAF（Web Application Firewall）是一款强大的网络安全防护产品，通过实时流量分析和精准规则拦截，有效抵御各种网络攻击。在部署雷池 WAF 的同时，结合阿里云 CDN（内容分发网络）可以显著提升网…...

编程日记 2024/12/29 13:30:04

3.银河麒麟V10 离线安装Nginx

1. 下载nginx离线安装包前往官网下载离线压缩包 2. 下载3个依赖 openssl依赖，前往官网下载 pcre2依赖下载，前往Git下载 zlib依赖下载，前往Git下载下载完成后完整的包如下： 如果网速下载不到请使用网盘下载通过网盘分享的文件…...

编程日记 2024/12/29 13:27:00

【模块一】kubernetes容器编排进阶实战之kubernetes 资源限制

kubernetes 资源限制 kubernetes中资源限制概括 1.如果运行的容器没有定义资源(memory、CPU)等限制，但是在namespace定义了LimitRange限制，那么该容器会继承LimitRange中的默认限制。 2.如果namespace没有定义LimitRange限制，那么该容器可…...

编程日记 2024/12/29 13:25:59

【开源】一款基于SpringBoot的智慧小区物业管理系统

一、下载项目文件项目文件源码链接：https://pan.quark.cn/s/3998d958e182如出现网盘空间不够存的情况！！！解决办法是先用夸克手机app注册，然后保存上方链接，就可以得到1TB空间了！！&…...

编程日记 2024/12/29 13:24:58

Goland：专为Go语言设计的高效IDE

本文还有配套的精品资源，点击获取简介：Goland是JetBrains公司开发的集成开发环境（IDE），专为Go语言设计，提供了高效的代码编辑、强大的调试工具和丰富的项目管理功能。其智能代码补全、强大的调试与测试支…...

编程日记 2024/12/29 13:23:57

云手机与Temu矩阵：跨境电商运营新引擎

云手机与 Temu 矩阵结合的基础云手机技术原理云手机基于先进的 ARM 虚拟化技术，在服务器端运行 APP。通过在服务器上利用容器虚拟化软件技术，能够虚拟出多个独立的手机操作系统实例，每个实例等同于一部单独的手机，可独立运行各…...

编程日记 2024/12/29 13:16:51

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/9/9 10:11:30

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/9/7 1:59:25

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...

编程新知 2025/8/21 6:35:28

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时，与数据库的交互无疑是核心环节。虽然传统的数据库操作方式（如直接编写SQL语句与psycopg2交互）赋予了我们精细的控制权，但在面对日益复杂的业务逻辑和快速迭代的需求时，这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/8/22 4:33:54

自然语言处理——循环神经网络

自然语言处理——循环神经网络循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM&#xff09…...

编程新知 2025/9/4 7:05:35

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。您还将了解如何分析列，以便知晓哪些列包含有价值的数据，…...

编程新知 2025/9/13 17:42:41

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写实现一个RNN网络完成多分类任务判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/7/9 4:55:48

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础协议全称 ：HyperText Transfer Protocol（超文本传输协议） 默认端口 ：HTTP 使用 80 端口，HTTPS 使用 443 端口。请求方法 ： GET ：用于获取资源，…...

编程新知 2025/8/25 4:55:24

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像（比如分辨率3000*3000的图像）的办法，尤其是想把内存中的裸数据（只有图像的数据，不包…...

编程新知 2025/9/7 8:49:50

相关文章：