圣诞快乐(h5 css js(圣诞树))

一,整体设计思路

圣诞树h5(简易)

1.页面布局与样式

页面使用了全屏的黑色背景,中央显示圣诞树,树形由三层绿色的三角形组成,每一层的大小逐渐变小。树干是一个棕色的矩形,位于三角形的底部。

2.动态元素

装饰球:通过 JavaScript 动态添加,每个装饰球都是一个红色的圆形,并且使用 @keyframes 实现闪烁效果。装饰球的位置和颜色是随机的,当用户点击装饰球时会弹出提示框。雪花:通过 JavaScript 动态添加雪花,雪花是白色的小圆形,使用 @keyframes 让雪花从屏幕顶部落下,落下速度是随机的。

3.动画与交互

a.闪烁动画:装饰球通过 CSS 的 @keyframes 实现闪烁效果,让它们看起来像闪烁的灯泡。雪花下
b.落动画:雪花也使用了类似的动画,使它们从屏幕上方逐渐掉落至屏幕底部。
c.随机效果:装饰球的颜色、位置、雪花的数量和动画时长都是随机生成的,使每次加载页面时都呈现不同的效果。

详细解释 会放在代码注释里面。

二,整体代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圣诞树</title><style>/* 设置页面的基本样式,居中显示并设置黑色背景 */body {margin: 0;padding: 0;background-color: #000;/* 背景颜色为黑色 */color: #fff;/* 字体颜色为白色 */font-family: Arial, sans-serif;/* 设置字体 */display: flex;justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */height: 100vh;/* 高度为视口的100% */overflow: hidden;/* 防止滚动条 */}/* 树的容器样式 */.tree {position: relative;width: 0;height: 0;margin-top: -50px;/* 调整树的位置 */}/* 树叶的层样式 */.triangle {position: absolute;width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;}/* 每一层树叶的样式 */.layer1 {border-bottom: 150px solid green;/* 第一层绿色树叶 */top: 0;left: -80px;/* 居中对齐 */}.layer2 {border-bottom: 130px solid green;/* 第二层树叶 */top: 100px;left: -80px;}.layer3 {border-bottom: 110px solid green;/* 第三层树叶 */top: 180px;left: -80px;}/* 树干样式 */.trunk {position: absolute;top: 290px;/* 树干位置 */width: 40px;height: 60px;background-color: brown;/* 树干颜色 */}/* 装饰球样式 */.ornament {position: absolute;width: 20px;height: 20px;background-color: red;/* 红色装饰球 */border-radius: 50%;/* 圆形 */box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);/* 发光效果 */animation: blink 2s infinite alternate;/* 让装饰球闪烁 */}/* 定义闪烁效果 */@keyframes blink {to {opacity: 0.2;/* 透明度变化 */}}/* 雪花样式 */.snowflake {position: absolute;top: -20px;/* 雪花从顶部开始 */width: 10px;height: 10px;background-color: white;/* 雪花颜色为白色 */border-radius: 50%;/* 圆形 */box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);/* 发光效果 */animation: fall linear infinite;/* 雪花下落动画 */}/* 定义雪花下落效果 */@keyframes fall {100% {transform: translateY(100vh);/* 让雪花下落到视口底部 */}}</style>
</head><body><!-- 圣诞树容器 --><div class="tree"><div class="triangle layer1"></div> <!-- 第一层 --><div class="triangle layer2"></div> <!-- 第二层 --><div class="triangle layer3"></div> <!-- 第三层 --><div class="trunk"></div> <!-- 树干 --></div><script>// 动态添加装饰球和雪花const tree = document.querySelector('.tree');const totalOrnaments = 20; // 圣诞树上的装饰球数量const totalSnowflakes = 50; // 雪花的数量// 创建装饰球function createOrnaments() {for (let i = 0; i < totalOrnaments; i++) {const ornament = document.createElement('div');ornament.classList.add('ornament');ornament.style.left = `${Math.random() * 180 - 80}px`; // 随机位置ornament.style.top = `${Math.random() * 280}px`; // 随机位置ornament.style.backgroundColor = getRandomColor(); // 随机颜色tree.appendChild(ornament);// 点击事件:点击装饰球时弹出提示ornament.addEventListener('click', () => {alert('你点击了一个装饰球!');});}}// 创建雪花function createSnowflakes() {for (let i = 0; i < totalSnowflakes; i++) {const snowflake = document.createElement('div');snowflake.classList.add('snowflake');snowflake.style.left = `${Math.random() * window.innerWidth}px`; // 随机位置snowflake.style.animationDuration = `${Math.random() * 5 + 3}s`; // 随机动画持续时间document.body.appendChild(snowflake);}}// 获取随机颜色function getRandomColor() {const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];return colors[Math.floor(Math.random() * colors.length)];}// 初始化圣诞场景createOrnaments();createSnowflakes();</script></body></html>

三,详细解释

I 大树部分

<body><div class="tree"><div class="triangle layer1"></div><div class="triangle layer2"></div><div class="triangle layer3"></div><div class="trunk"></div></div>
</body>

一棵大树,里面有树干和树叶部分,树叶部分用triangle类名,并在css当中把它绘制成三角形。

.triangle {position: absolute;width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;
}

layer表示层级 有三层,trunk类名的div是树干。

//树干
.trunk {position: absolute;top: 290px;width: 40px;height: 60px;background-color: brown;
}

 II 动画效果

动态装饰球(Ornaments)这个是随机生成的。

function createOrnaments() {for (let i = 0; i < totalOrnaments; i++) {const ornament = document.createElement('div');ornament.classList.add('ornament');ornament.style.left = `${Math.random() * 180 - 80}px`;ornament.style.top = `${Math.random() * 280}px`;ornament.style.backgroundColor = getRandomColor();tree.appendChild(ornament);ornament.addEventListener('click', () => {alert('你点击了一个装饰球!');});}
}

装饰球闪烁效果(CSS 动画)

@keyframes blink {to {opacity: 0.2;}
}

动态雪花效果

function createSnowflakes() {for (let i = 0; i < totalSnowflakes; i++) {const snowflake = document.createElement('div');snowflake.classList.add('snowflake');snowflake.style.left = `${Math.random() * window.innerWidth}px`;snowflake.style.animationDuration = `${Math.random() * 5 + 3}s`;document.body.appendChild(snowflake);}
}

createSnowflakes 函数生成了 50 个雪花(totalSnowflakes = 50)。每个雪花是一个小圆形的 div 元素,位置是随机的,雪花的 left 值根据窗口宽度随机生成。animationDuration 设置了雪花的下落时间,使每片雪花的下落速度不同。

随机颜色生成(JavaScript 函数)

function getRandomColor() {const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];return colors[Math.floor(Math.random() * colors.length)];
}

提前祝福大家 圣诞快乐

效果:

圣诞树h5(简易)

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

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

相关文章

PostgreSQL和Postgis安装

Windows下PostgreSQL和对应的版本的Postgis安装 PostgreSQL安装 1、官网下载地址 https://www.enterprisedb.com/downloads/postgres-postgresql-downloads 2、根据自己的系统下载完成&#xff0c;Windows下可以直接傻瓜式安装就OK 建议不要通过自带的这个程序安装postgis,…

拒绝 Helm? 如何在 K8s 上部署 KRaft 模式 Kafka 集群?

首发&#xff1a;运维有术 今天分享的主题是&#xff1a;不使用 Helm、Operator&#xff0c;如何在 K8s 集群上手工部署一个开启 SASL 认证的 KRaft 模式的 Kafka 集群&#xff1f; 本文&#xff0c;我将为您提供一份全面的实战指南&#xff0c;逐步引导您完成以下关键任务&a…

面向微服务的Spring Cloud Gateway的集成解决方案:用户登录认证与访问控制

&#x1f3af;导读&#xff1a;本文档详细描述了一个基于Spring Cloud Gateway的微服务网关及Admin服务的实现。网关通过定义路由规则&#xff0c;利用负载均衡将请求转发至不同的后端服务&#xff0c;并集成了Token验证过滤器以确保API的安全访问&#xff0c;同时支持白名单路…

牛客网 SQL36查找后排序

SQL36查找后排序 select device_id,age from user_profile order by age asc #select [字段1,字段2] from [表名] order by [字段1] [升序(asc)/降序(desc)],[字段2] [升序(asc)/降序(desc)] #select&#xff1a;查询 #order by 排序 每日问题 如何实现对象的克隆&#xff1…

备忘一个FDBatchMove数据转存的问题

使用FDBatchMove的SQL导入excel表到sql表&#xff0c;设置条件时一头雾水&#xff0c;函数不遵守sql的规则。 比如替换字段的TAB键值为空&#xff0c;replace(字段名,char(9),)竟然提示错误&#xff0c;百思不得其解。 试遍了几乎所有的函数&#xff0c;竟然是chr(9)。 这个…

C++的封装(十四):《设计模式》这本书

很多C学习者学到对C语言有一定自信后&#xff0c;会去读一下《设计模式》这本书。希望能够提升自己的设计水平。 据我所知&#xff0c;围绕C语言出了很多书。因为正好赶上泡沫经济时代。大家一拥而上&#xff0c;自己半懂不懂就出书&#xff0c;抢着出书收割读者&#xff0c;出…

TransmittableThreadLocal线程变量传递问题

ThreadLocal有时挺好用的&#xff0c;但是在某些情况下需要将父线程中的本地变量传递给子线程时&#xff0c;这个就不行了。 那么TransmittableThreadLocal就是为了解决这个问题的&#xff0c;但是&#xff0c;如果在某些异步的场景中&#xff0c;特别是异步线程是下载文件等耗…

浅析InnoDB引擎架构(已完结)

大家好&#xff0c;我是此林。 今天来介绍下InnoDB底层架构。 1. 磁盘架构 我们所有的数据库文件都保存在 /var/lib/mysql目录下。 由于我这边是docker部署的mysql&#xff0c;用如下命令查看mysql数据挂载。 docker inspect mysql-master 如下图&#xff0c;目前只有一个数…

Ajax中的axios

既然提到Ajax&#xff0c;那就先来说一说什么是Ajax吧 关于Ajax Ajax的定义 Asynchronous JavaScript And XML&#xff1a;异步的JavaScript和XML。 反正就是一句话总结&#xff1a; 使用XML HttpRequest 对象与服务器进行通讯。 AJAX 是一种在无需重新加载整个网页的情况下&…

苹果手机怎么清理空间:拯救你的拥挤手机

在数字生活的海洋中&#xff0c;我们的苹果手机就像一艘小船&#xff0c;载满了照片、应用、视频和各种下载的“宝贝”。随着时间的推移&#xff0c;这艘小船开始变得拥挤&#xff0c;航行速度放缓&#xff0c;甚至有时候直接卡壳。苹果手机怎么清理空间&#xff1f;是时候学会…

electron-vite打包后图标不生效问题

在electron-builder.yml中&#xff0c;通过icon配置自己的图标&#xff0c;以下是正确代码 win:executableName: 名称icon: build/icon.ico nsis:artifactName: ${name}-${version}.${ext}shortcutName: ${productName}uninstallDisplayName: ${productName}createDesktopShor…

redis离线安装脚本

redis离线安装脚本 说明脚本使用完整脚本脚本内容说明1、参数校验2、文件及文件夹检查3、检查是否有同名服务4、解压、编译安装5、修改配置文件6、配置服务及开机自启动 说明 经常装服务器环境&#xff0c;根据以前的安装经验写了个安装脚本。本人不是专业运维&#xff0c;也是…

Linux - rpm yum 工具及命令总结

RPM 概述 定义&#xff1a;RPM&#xff08;RedHat Package Manager&#xff09;&#xff0c;是一个功能强大的软件包管理系统&#xff0c;用于在 Linux 系统中安装、升级和管理软件包采用系统&#xff1a;主要用于基于 RPM 的 Linux 发行版&#xff0c;如 Red Hat、CentOS、S…

三、使用langchain搭建RAG:金融问答机器人--检索增强生成

经过前面2节数据准备后&#xff0c;现在来构建检索 加载向量数据库 from langchain.vectorstores import Chroma from langchain_huggingface import HuggingFaceEmbeddings import os# 定义 Embeddings embeddings HuggingFaceEmbeddings(model_name"m3e-base")#…

C语言 函数嵌套

#include <stdio.h> void new_line() {printf("hehe\n"); } void three_line() {int i 0;for (i 0; i < 3; i){new_line;} } int main() {three_line();return 0; } 函数可以嵌套调用&#xff0c;但不能嵌套定义 链式访问 main有三个参数 //main函数的…

问题解决:发现Excel中的部分内容有问题。是否让我们尽量尝试恢复? 如果您信任此工作簿的源,请单击“是”。

在开发同步导出功能是遇到了如标题所示的问题&#xff0c;解决后遂记录下来供大家参考。 RestController public class XxxController {PostMapping("/export")public BaseResponse export(RequestBody PolicyErrorAnalysisExportReq exportReq, HttpServletRespons…

基于ST STM32MP257FAK3的MP2控制器之工业PLC 方案

简介 1.可编程逻辑控制器&#xff08;PLC&#xff09;是种专门为在工业环境下应用而设计的数字运算操作电子系统。它采用一种可编程的存储器&#xff0c;在其内部存储执行逻辑运算、顺序控制、定时、计数和算术运算等操作的指令&#xff0c;通过数字式或模拟式的输入输出来控制…

golang自定义MarshalJSON、UnmarshalJSON 原理和技巧

问题出现的原因&#xff1a;在前后端分离的项目中&#xff0c;经常出现的问题是时间戳格式的问题。 后端的日期格式兼容性强&#xff0c;比较完善。前端由于各种原因&#xff0c;日期格式不完善。 就会产生矛盾。 ms int64比较通用&#xff0c;但是unix时间没有可读性&#xff…

初始Python篇(7)—— 正则表达式

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; Python 目录 正则表达式的概念 正则表达式的组成 元字符 限定符 其他字符 正则表达式的使用 正则表达式的常见操作方法 match方法的…

使用 AI 辅助开发一个开源 IP 信息查询工具:一

本文将分享如何借助当下流行的 AI 工具,一步步完成一个开源项目的开发。 写在前面 在写代码时&#xff0c;总是会遇到一些有趣的机缘巧合。前几天&#xff0c;我在翻看自己之前的开源项目时&#xff0c;又看到了 DDNS 相关的讨论。虽然在 2021 年我写过两篇相对详细的教程&am…