圣诞快乐（h5 css js（圣诞树））

一，整体设计思路

圣诞树h5（简易）

1.页面布局与样式：

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

2.动态元素

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

3.动画与交互：

a.闪烁动画：装饰球通过 CSS 的 `@keyframes` 实现闪烁效果，让它们看起来像闪烁的灯泡。雪花下

b.落动画：雪花也使用了类似的动画，使它们从屏幕上方逐渐掉落至屏幕底部。

c.随机效果：装饰球的颜色、位置、雪花的数量和动画时长都是随机生成的，使每次加载页面时都呈现不同的效果。

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

二，整体代码

html 复制代码

<!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 大树部分

html 复制代码

<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（简易）

圣诞快乐（h5 css js（圣诞树））

一，整体设计思路

1.页面布局与样式：

2.动态元素

3.动画与交互：

a.闪烁动画 ：装饰球通过 CSS 的 @keyframes 实现闪烁效果，让它们看起来像闪烁的灯泡。雪花下

b.落动画：雪花也使用了类似的动画，使它们从屏幕上方逐渐掉落至屏幕底部。

c.随机效果：装饰球的颜色、位置、雪花的数量和动画时长都是随机生成的，使每次加载页面时都呈现不同的效果。

二，整体代码

三，详细解释

I 大树部分

II 动画效果

a.闪烁动画：装饰球通过 CSS 的 `@keyframes` 实现闪烁效果，让它们看起来像闪烁的灯泡。雪花下