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

ops/2024/12/28 8:17:02/

一,整体设计思路

圣诞树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当中把它绘制成三角形。

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

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

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

 II 动画效果

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

javascript">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 动画)

javascript">@keyframes blink {to {opacity: 0.2;}
}

动态雪花效果

javascript">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 函数)

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

提前祝福大家 圣诞快乐

效果:

圣诞树h5(简易)


http://www.ppmy.cn/ops/145611.html

相关文章

5G CPE接口扩展之轻量型多口千兆路由器小板选型

多口千兆路由器小板选型 方案一: 集成式5口千兆WIFI路由器小板方案二:交换板 + USBwifiUSB WIFI选型一USBwifi选型二:四口千兆选型一四口千兆选型二:四口千兆选型三:部分5G CPE主板不支持Wifi,并且网口数量较少,可采用堆叠方式进行网口和wifi功能 扩展,本文推荐一些路由…

spring boot 火车售票微信小程序LW

摘 要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xff0c;科学化的管理&#xff0c;使信息存…

“黄师日报”平安小程序springboot+论文源码调试讲解

第2章 开发环境与技术 基于web的“黄师日报”平安小程序的编码实现需要搭建一定的环境和使用相应的技术&#xff0c;接下来的内容就是对基于web的“黄师日报”平安小程序用到的技术和工具进行介绍。 2.1 MYSQL数据库 本课题所开发的应用程序在数据操作方面是不可预知的&#…

LeetCode题练习与总结:键盘行--500

一、题目描述 给你一个字符串数组 words &#xff0c;只返回可以使用在 美式键盘 同一行的字母打印出来的单词。键盘如下图所示。 请注意&#xff0c;字符串 不区分大小写&#xff0c;相同字母的大小写形式都被视为在同一行。 美式键盘 中&#xff1a; 第一行由字符 "…

http 请求总结get

关于get请求传递body的问题 错误代码 有400 , 415 等情况 <!doctype html><html lang"zh"><head><title>HTTP Status 400 – 错误的请求</title><style type"text/css">body {font-family:Tahoma,Arial,sans-seri…

网络安全攻防学习平台 - 基础关

基本方法&#xff08;本次用到&#xff09; 开发者工具&#xff1a;一般浏览器都自带开发者工具&#xff08;快捷键为F12&#xff09;&#xff0c;点击后&#xff0c;可以查看当前网页的源代码&#xff0c;智能一点的浏览器&#xff0c;将鼠标移到指定的代码上&#xff0c;就会…

每天40分玩转Django:Django静态文件

Django静态文件 一、今日学习内容概述 学习模块重要程度主要内容静态文件配置⭐⭐⭐⭐⭐基础设置、路径配置CDN集成⭐⭐⭐⭐⭐CDN配置、资源优化静态文件处理⭐⭐⭐⭐压缩、版本控制部署优化⭐⭐⭐⭐性能优化、缓存策略 二、基础配置 # settings.py import os# 静态文件配置…

【Pytorch实用教程】PyTorch 自带的数据集全面解读

下面这篇博客文章将带你快速了解 PyTorch 自带(或官方维护)的各类常用数据集,并介绍它们的使用方法,包括图像、文本和音频数据集。希望能帮助你在项目中快速上手并提高效率。 一、为什么要使用 PyTorch 自带的数据集? 1. 方便、快捷 官方维护的数据集通常已经帮助我们做好…