Merry Christmas HTML

   简单分享 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/496535.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录Day56 108. 冗余连接,109. 冗余连接II。

1.冗余连接 卡码网题目链接&#xff08;ACM模式&#xff09;(opens new window) 题目描述 有一个图&#xff0c;它是一棵树&#xff0c;他是拥有 n 个节点&#xff08;节点编号1到n&#xff09;和 n - 1 条边的连通无环无向图&#xff08;其实就是一个线形图&#xff09;&am…

MySQL外键类型与应用场景总结:优缺点一目了然

前言&#xff1a; MySQL的外键简介&#xff1a;在 MySQL 中&#xff0c;外键 (Foreign Key) 用于建立和强制表之间的关联&#xff0c;确保数据的一致性和完整性。外键的作用主要是限制和维护引用完整性 (Referential Integrity)。 主要体现在引用操作发生变化时的处理方式&…

双指针——查找总价格为目标值的两个商品

一.题目描述 LCR 179. 查找总价格为目标值的两个商品 - 力扣&#xff08;LeetCode&#xff09; 二.题目解析 这个题目非常简单&#xff0c;其实就是判断有没有两个数加起来等于target。 三.算法解析 1.暴力解法 暴力解法的话我们可以枚举出所有的情况&#xff0c;然后判…

使用 HTML5 Canvas 实现动态蜈蚣动画

使用 HTML5 Canvas 实现动态蜈蚣动画 1. 项目概述 我们将通过 HTML 和 JavaScript 创建一个动态蜈蚣。蜈蚣由多个节段组成&#xff0c;每个节段看起来像一个小圆形&#xff0c;并且每个节段上都附带有“脚”。蜈蚣的头部会在画布上随机移动。 完整代码在底部&#xff01;&…

Unity2021.3.16f1可以正常打开,但是Unity2017.3.0f3却常常打开闪退或者Unity2017编辑器运行起来就闪退掉

遇到问题&#xff1a; 从今年开始&#xff0c;不知道咋回事&#xff0c;电脑上的Unity2017像是变了个人似得&#xff0c;突然特别爱闪退掉&#xff0c;有时候还次次闪退&#xff0c;真是让人无语&#xff0c;一直以来我都怀疑是不是电脑上安装了什么别的软件了&#xff0c;导致…

深度学习中的并行策略概述:2 Data Parallelism

深度学习中的并行策略概述&#xff1a;2 Data Parallelism 数据并行&#xff08;Data Parallelism&#xff09;的核心在于将模型的数据处理过程并行化。具体来说&#xff0c;面对大规模数据批次时&#xff0c;将其拆分为较小的子批次&#xff0c;并在多个计算设备上同时进行处…

如何快速找到合适的科学问题

前面已经讲过 如何快速判断学术论文质量与相关性 如何描述科学问题&#xff1f;从“术”入手&#xff0c;悟出属于自己的“道” 医学图像分割任务中的典型科学问题 如何快速肝论文&#xff1f; 博士论文的写作架构 这些内容分别阐述了 如何找到重要的相关论文 找到科学问…

如何为运行在 PICO 4 Ultra 设备上的项目设置外部文件读写权限?

PICO 4 Ultra 系列设备使用的安卓操作系统为 Android 14。当项目的 Write Permission 为 Externa (SDCard) 且 Android API Level 大于 32 时&#xff0c;Unity 提供的外部文件读取方式在 PICO 4 Ultra 设备上将失效。此问题提供两种解决方法&#xff0c;按实际情况选取。 解决…

MacOS安装Xcode(非App Store)

文章目录 访问官网资源页面 访问官网资源页面 直接访问官网的历史版本下载资源页面地址&#xff1a;https://developer.apple.com/download/more/完成APP ID的登陆&#xff0c;直接找到需要的软件下载即可 解压后&#xff0c;安装将xcode.app移动到应用程序文件夹。

OpenLinkSaas使用手册-Git工具

在OpenLinkSaas的工具箱里面&#xff0c;最基础的一个就是Git仓库管理。Git仓库功能让git使用更加简单和强大&#xff0c;不仅可以使用常规的commit/pull/push/branch等功能外&#xff0c;还连接了Git仓库供应商的能力。 OpenLinkSass支持使用国内主流的Git仓库供应商的账号登录…

.NET平台用C#通过字节流动态操作Excel文件

在.NET开发中&#xff0c;通过字节流动态操作Excel文件提供了一种高效且灵活的方式处理数据。这种方法允许开发者直接在内存中创建、修改和保存Excel文档&#xff0c;无需依赖直接的文件储存、读取操作&#xff0c;从而提高了程序的性能和安全性。使用流技术处理Excel不仅简化了…

vue之axios基本使用

文章目录 1. axios 网络请求库2. axiosvue 1. axios 网络请求库 <body> <input type"button" value"get请求" class"get"> <input type"button" value"post请求" class"post"> <!-- 官网提供…

STM32开发笔记123:使用FlyMcu下载程序

文章目录 前言一、FlyMcu二、电路图三、使用方法1、配置2、读取器件信息3、擦除芯片4、加载文件下载程序5、启动应用程序前言 本文介绍使用FlyMcu下载程序到STM32微控制器的方法。 一、FlyMcu FlyMcu轻量级,比STM32CubeProgrammer使用更为简便,下载地址:http://www.mcuis…

mysql返回N/A

在写统计图的接口&#xff0c;sql查询一直无数据&#xff0c;给的默认值也没有实现&#xff1a; SELECTifnull( unit.num, 0 ) riskUnitCount,ifnull( EVENT.num, 0 ) riskEventCount,ifnull( measure.num, 0 ) riskMeasureCount FROMtb_companyLEFT JOIN (SELECTrisk.qyid,co…

Linux网络——TCP的运用

系列文章目录 文章目录 系列文章目录一、服务端实现1.1 创建套接字socket1.2 指定网络接口并bind2.3 设置监听状态listen2.4 获取新链接accept2.5 接收数据并处理&#xff08;服务&#xff09;2.6 整体代码 二、客户端实现2.1 创建套接字socket2.2 指定网络接口2.3 发起链接con…

C/C++ 数据结构与算法【哈夫曼树】 哈夫曼树详细解析【日常学习,考研必备】带图+详细代码

哈夫曼树&#xff08;最优二叉树&#xff09; 1&#xff09;基础概念 **路径&#xff1a;**从树中一个结点到另一个结点之间的分支构成这两个结点间的路径。 **结点的路径长度&#xff1a;**两结点间路径上的分支数。 **树的路径长度&#xff1a;**从树根到每一个结点的路径…

Nginx的性能分析与调优简介

Nginx的性能分析与调优简介 一、Nginx的用途二、Nginx负载均衡策略介绍与调优三、其他调优方式简介四、Nginx的性能监控 一、Nginx的用途 ‌Nginx是一种高性能的HTTP和反向代理服务器&#xff0c;最初作为HTTP服务器开发&#xff0c;主要用于服务静态内容如HTML文件、图像、视…

uniapp使用live-pusher实现模拟人脸识别效果

需求&#xff1a; 1、前端实现模拟用户人脸识别&#xff0c;识别成功后抓取视频流或认证的一张静态图给服务端。 2、服务端调用第三方活体认证接口&#xff0c;验证前端传递的人脸是否存在&#xff0c;把认证结果反馈给前端。 3、前端根据服务端返回的状态&#xff0c;显示在…

基于SpringBoot的“房产销售平台”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“房产销售平台”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统整体模块图 登录窗口界面 房源信息管理窗口界…

EMC——射频场感应的传导骚扰抗扰度(CS)

术语和定义 AE&#xff08;辅助设备&#xff09; 为受试设备正常运行提供所需信号的设备和检验受试设备性能的设备&#xff1b; 钳注入 是用电缆上的钳合式“电流”注入装置获得的钳注入&#xff1b; 电流钳 由被注入信号的电缆构成的二次绕组实现的电流变换器&#xff1b; 电磁…