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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux应用开发————mysql数据库表

mysql数据库表操作 查看表的结构 mysql> desc / describe 表名; 或者&#xff1a; mysql> show create table 表名; 常见数据库引擎&#xff1a; innodb, myISAM... 删除表 mysql> drop tabl…

移动网络(2,3,4,5G)设备TCP通讯调试方法

背景&#xff1a; 当设备是移动网络设备连接云平台的时候&#xff0c;如果服务器没有收到网络数据&#xff0c;移动物联设备发送不知道有没有有丢失数据的时候&#xff0c;需要一个抓取设备出来的数据和服务器下发的数据的方法。 1.服务器系统是很成熟的&#xff0c;一般是linu…

Unity中的委托和事件(UnityAction、UnityEvent)

委托和事件 &#x1f392;什么是委托&#xff0c;委托的关键字是Delegate&#xff0c;委托是一种函数的容器&#xff0c;运行将函数做为变量来进行传递 通过Delegate关键字我们声明了一个无参无返回的委托&#xff0c;通过这个委托我们可以存储无参无返回的函数 public deleg…

基于SpringBoot的“交流互动系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“交流互动系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能图 管理员登录界面图 个人信息界面图 个人…

LeetCode hot100-93

https://leetcode.cn/problems/longest-palindromic-substring/description/?envTypestudy-plan-v2&envIdtop-100-liked 5. 最长回文子串 给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。状态定义 我们用一个二维数组 dp[i][j] 表示子串 s[i…j] 是否是回文&…

C语言入门指南:从零开始的编程之路

记得我刚开始接触编程时,也像很多初学者一样充满疑惑。编程看起来很神奇,但要如何开始呢?经过多年编程经验的积累,今天和大家分享如何入门C语言编程。 C语言诞生于1972年,由Dennis Ritchie在贝尔实验室开发。它的出现彻底改变了计算机编程的历史。虽然现在有很多更新的编程语…

详解Redis的String类型及相关命令

目录 SET GET MGET MSET SETNX SET和SETNX和SETXX对比 INCR INCRBY DECR DECRBY INCRBYFLOAT APPEND GETRANGE SETRANGE STRLEN 内部编码 SET 将 string 类型的 value 设置到 key 中。如果 key 之前存在&#xff0c;则覆盖&#xff0c;⽆论原来的数据类型是什么…

SpringBoot使用 AOP 实现自定义日志记录并保存在Mysql

本文主要介绍在 Spring Boot 中使用 AOP 实现自定义日志记录并保存在 Mysql 的方法。先阐述记录日志的重要性及传统方式的弊端&#xff0c;提出新方式&#xff0c;即通过创建自定义注解、切面类等&#xff0c;将重要日志存到数据库&#xff0c;还给出了创建日志表、注解类、切面…

对golang的io型进程进行off-cpu分析

背景&#xff1a; 对于不能占满所有cpu核数的进程&#xff0c;进行on-cpu的分析是没有意义的&#xff0c;因为可能程序大部分时间都处在阻塞状态。 实验例子程序&#xff1a; 以centos8和golang1.23.3为例&#xff0c;测试下面的程序&#xff1a; pprof_netio.go package m…

CTF入门:以Hackademic-RTB1靶场为例初识夺旗

一、网络扫描 靶机ip地址为192.168.12.24 使用nmap工具进行端口扫描 nmap -sT 192.168.12.24 二、信息收集 1、80端口探索 靶机开放了80和22端口&#xff0c;使用浏览器访问靶机的80端口&#xff0c;界面如下&#xff1a; 点击target发现有跳转&#xff0c;并且url发生相应变…

腾讯云智能结构化OCR:以多模态大模型技术为核心,推动跨行业高效精准的文档处理与数据提取新时代

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大三学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…

SD ComfyUI工作流 根据图像生成线稿草图

文章目录 线稿草图生成SD模型Node节点工作流程工作流下载效果展示线稿草图生成 该工作流的设计目标是将输入的图像转换为高质量的线稿风格输出。其主要流程基于 Stable Diffusion 技术,结合文本和图像条件,精确生成符合预期的线条艺术图像。工作流的核心是通过模型的条件设置…

Zabbix6.0升级为6.4

为了体验一些新的功能&#xff0c;比如 Webhook 和问题抑制等&#xff0c;升级个小版本。 一、环境信息 1. 版本要求 一定要事先查看官方文档&#xff0c;确认组件要求的版本&#xff0c;否则版本过高或者过低都会出现问题。 2. 升级前后信息 环境升级前升级后操作系统CentOS…

网络安全概论——身份认证

一、身份证明 身份证明可分为以下两大类 身份验证——“你是否是你所声称的你&#xff1f;”身份识别——“我是否知道你是谁&#xff1f;” 身份证明系统设计的三要素&#xff1a; 安全设备的系统强度用户的可接受性系统的成本 实现身份证明的基本途径 所知&#xff1a;个…

LabVIEW中的“Synchronize with Other Application Instances“

在LabVIEW中&#xff0c;“Synchronize with Other Application Instances”是一个常见的提示或错误&#xff0c;通常出现在尝试并行运行多个LabVIEW实例时&#xff0c;特别是当你打开多个VI或项目时。这个问题可能影响程序的执行流程&#xff0c;导致不同实例之间的数据同步或…

OpenGL ES 01 渲染一个四边形

项目架构 着色器封装 vertex #version 300 es // 接收顶点数据 layout (location 0) in vec3 aPos; // 位置变量的属性位置值为0 layout (location 1) in vec4 aColors; // 位置变量的属性位置值为1 out vec4 vertexColor; // 为片段着色器指定一个颜色输出void main() {gl…

Maven 生命周期

文章目录 Maven 生命周期- Clean 生命周期- Build 生命周期- Site 生命周期 Maven 生命周期 Maven 有以下三个标准的生命周期&#xff1a; Clean 生命周期&#xff1a; clean&#xff1a;删除目标目录中的编译输出文件。这通常是在构建之前执行的&#xff0c;以确保项目从一个…

力学笃行(二)Qt 示例程序运行

Qt 示例程序运行 1. Qt 示例程序简介1.1 编译报错问题: qt: error: cannot open C:\Users\我的电脑\AppData\Local\Temp\main.obj.34588.15.jom for write 2. Qt 示例程序主要分类2.1 Widgets 示例2.2 Qt Quick 示例2.3 3D 示例2.4 多媒体示例2.5 网络示例2.6 数据库示例2.7 图…

机器学习基础算法 (二)-逻辑回归

python 环境的配置参考 从零开始&#xff1a;Python 环境搭建与工具配置 逻辑回归是一种用于解决二分类问题的机器学习算法&#xff0c;它可以预测输入数据属于某个类别的概率。本文将详细介绍逻辑回归的原理、Python 实现、模型评估和调优&#xff0c;并结合垃圾邮件分类案例进…

《机器学习》支持向量机

目录 结构风险&#xff08;Structural Risk&#xff09;和经验风险&#xff08;Empirical Risk&#xff09; 经验风险&#xff08;Empirical Risk&#xff09;&#xff1a; 结构风险&#xff08;Structural Risk&#xff09;&#xff1a; L0范数&#xff1a; L0范数是指向…