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

圣诞快乐(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(简易)

相关文章:

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

一&#xff0c;整体设计思路 圣诞树h5&#xff08;简易&#xff09; 1.页面布局与样式&#xff1a; 页面使用了全屏的黑色背景&#xff0c;中央显示圣诞树&#xff0c;树形由三层绿色的三角形组成&#xff0c;每一层的大小逐渐变小。树干是一个棕色的矩形&#xff0c;位于三角…...

基于MATLAB的图像增强

目录 一、背景及意义介绍背景图像采集过程中的局限性 意义 二、概述三、代码结构及说明&#xff08;一&#xff09;整体结构&#xff08;二&#xff09;亮度增强部分&#xff08;三&#xff09;对比度增强部分&#xff08;四&#xff09;锐度增强部分 四、复现步骤&#xff08;…...

大数据之Hbase环境安装

Hbase软件版本下载地址&#xff1a; http://mirror.bit.edu.cn/apache/hbase/ 1. 集群环境 Master 172.16.11.97 Slave1 172.16.11.98 Slave2 172.16.11.99 2. 下载软件包 #Master wget http://archive.apache.org/dist/hbase/0.98.24/hbase-0.98.24-hadoop1-bin.tar.gz…...

javaEE--计算机是如何工作的-1

目录 一.计算机的组成: 各组件的功能: 衡量cpu好坏的标准: 二.指令(instruction) 三.操作系统Operating System 四.进程/任务process/tesk 五.进程在系统中如何管理 1.进程在系统中的管理,从两个角度来分类: 2.进程控制块PCB&#xff08;Process Control Block)) 3.P…...

vue.js 指令的修饰符

Vue.js 提供了一些指令修饰符&#xff0c;用于在指令的行为上添加额外的功能。下面详细解析一些常用的指令修饰符&#xff0c;并提供相应的代码实例。 .prevent&#xff1a;阻止默认事件 通过添加 .prevent 修饰符&#xff0c;可以阻止指令绑定的元素触发默认事件。 代码实例&a…...

基于java web在线商城购物系统源码+论文

一、环境信息 开发语言&#xff1a;JAVA JDK版本&#xff1a;JDK8及以上 数据库&#xff1a;MySql5.6及以上 Maven版本&#xff1a;任意版本 操作系统&#xff1a;Windows、macOS 开发工具&#xff1a;Idea、Eclipse、MyEclipse 开发框架&#xff1a;SpringbootHTMLjQueryMysq…...

Autosar入门_架构(Architecture)

上一篇 | 返回主目录 | 下一篇 架构(Architecture) 1 Autosar架构分层概述2 MCAL3 ECU抽象层4 复杂设备驱动5 服务层6 RTE7 应用软件层1 Autosar架构分层概述 整体架构分为三层:应用软件(APP)、实时运行环境(RTE)、基础软件(BSW)以下架构对BSW进行了细化,主要包含四…...

Altair: 轻松创建交互式数据可视化

Altair: 轻松创建交互式数据可视化 Altair 是一个基于 Vega-Lite 的 Python 数据可视化库&#xff0c;它旨在简化数据可视化的创建过程&#xff0c;尤其适用于统计图表的生成。Altair 强调声明式编码方式&#xff0c;通过简单的语法&#xff0c;用户能够快速创建复杂的交互式图…...

APM32F411使用IIS外设驱动es8388实现自录自播

前言&#xff1a; 从零开始学习I2s外设&#xff0c;配置Es8288寄存器实现录音播放。本文章使用主控芯片是APM32F411系类。音频相关的概念比较多&#xff0c;就不再次做过多的介绍&#xff0c;本文章只是简单实现边录边播功能。APM系类兼容st的芯片&#xff0c;所以用st的hal库来…...

RabbitMQ消息队列的笔记

Rabbit与Java相结合 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> 在配置文件中编写关于rabbitmq的配置 rabbitmq:host: 192.168.190.132 /…...

JAVA没有搞头了吗?

前言 今年的Java程序员群体似乎承受着前所未有的焦虑。投递简历无人问津&#xff0c;难得的面试机会也难以把握&#xff0c;即便成功入职&#xff0c;也往往难以长久。于是&#xff0c;不少程序员感叹&#xff1a;互联网的寒冬似乎又一次卷土重来&#xff0c;环境如此恶劣&…...

【线性代数】理解矩阵乘法的意义(点乘)

刚接触线性代数时&#xff0c;很不理解矩阵乘法的计算规则&#xff0c;为什么规则定义的看起来那么有规律却又莫名其妙&#xff0c;现在参考了一些资料&#xff0c;回过头重新总结下个人对矩阵乘法的理解&#xff08;严格来说是点乘&#xff09;。 理解矩阵和矩阵的乘法&#x…...

游戏开发技能系统常用概念

一个角色同一时间可能存在多个Skill&#xff0c;一个当前播放的主动技能&#xff0c;还有好几个不在播放中&#xff0c;但是也没有结束的。 技能事件&#xff1a; 实现具体的技能功能&#xff0c;技能动作的执行都是通过触发事件来触发的&#xff0c;比如&#xff08;时间帧&am…...

【案例80】麒麟操作系统无法使用Uclient访问NC65

问题现象 麒麟操作系统&#xff0c;安装Uclient&#xff0c;添加应用后无法看到登录界面&#xff0c;一直在转圈。 问题分析 进入到Uclient的工作目录 发现在工作目录下&#xff0c;无相关app.log生成。 查看Uclient的main.log发现&#xff0c;有大量的报错与Uclient下的sha…...

【AIGC-ChatGPT进阶副业提示词】育儿锦囊:化解日常育儿难题的实用指南

引言 在育儿的道路上&#xff0c;每位父母都会遇到各种各样的挑战和困惑。从孩子的饮食习惯到沟通交流&#xff0c;从作息规律到行为管理&#xff0c;这些看似平常的问题往往会让父母感到焦虑和无助。本文将通过实际案例分析和解决方案&#xff0c;为父母们提供一个实用的育儿…...

使用Docker部署一个Node.js项目

本文档将介绍如何使用Docker来部署一个Node.js项目。Docker是一种开源平台&#xff0c;可以自动化应用程序的部署、扩展和管理。通过Docker&#xff0c;我们可以将应用程序及其依赖项打包到一个容器中&#xff0c;从而确保在不同环境中运行的一致性。接下来&#xff0c;我们将逐…...

数据科学与SQL:如何利用本福特法则识别财务数据造假?

目录 0 本福特法则介绍 1 数据准备 2 问题分析 步骤1:提取首位数: 步骤2:计算首位数字的实际频率分布 <...

文心一言对接FreeSWITCH实现大模型呼叫中心

文心一言对接FreeSWITCH实现大模型呼叫中心 作者&#xff1a;开源大模型智能呼叫中心FreeIPCC&#xff0c;Github&#xff1a;https://github.com/lihaiya/freeipcc 随着人工智能技术的快速发展&#xff0c;特别是大规模语言模型&#xff08;LLM&#xff09;的应用&#xff0…...

LSTM实现天气模型训练与预测

要实现一个天气预测的模型&#xff0c;并确保该模型可以反复进行训练和更新&#xff0c;先设计&#xff1a; 设计方案 数据获取&#xff1a; 使用公开的天气数据API&#xff08;例如OpenWeather API或其他类似的API&#xff09;获取天气数据。确保数据以合适的格式&#xff08…...

TCL发布万象分区,再造Mini LED技术天花板

作者 |辰纹 来源 | 洞见新研社 现实世界中&#xff0c;光通过悬浮在大气中的冰晶折射&#xff0c;呈现出环形、弧形、柱形或亮点的扩散&#xff0c;从而产生光晕&#xff0c;雨后的彩虹是我们经常能看到的光晕现象。 然而&#xff0c;当光晕出现在电视中&#xff0c;那就不是…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...