答china马斯克
如果我把之前情人节的代码改改换成中秋节,阁下如何应对?
不多说先上效果图。
这里我使用HTML+CSS+JavaScript组合打造一款 “可交互的流心奶黄月饼”,既保留传统月饼的视觉形态,又加入鼠标悬浮流心溢出、点击掉落玉兔与祝福的动态效果,让代码里的中秋既有颜值又有互动感。
整个月饼分为 “外观层 - 流心层 - 交互层”,从视觉到体验层层递进,模拟真实吃月饼时 “咬开流心溢出” 的惊喜感。
操作设置:鼠标悬浮时,奶黄流心从月饼中心 “融化” 溢出,搭配发光效果,像刚掰开的热乎月饼;点击月饼时,不仅会弹出随机中秋祝福,还会从屏幕上方掉落玉兔、月亮、桂花等元素,模拟 “月宫撒福” 的浪漫场景。这里我没有用任何图片,纯代码通过 CSS 渐变、伪元素、动画实现所有视觉效果,轻量化且兼容性强,复制代码到本地 HTML 文件就能直接运行。
直接上代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>china马斯克的快乐中秋</title>
    <style>
        /* 页面基础样式:居中+深色背景凸显月饼 */
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #0f172a; /* 深夜蓝背景,模拟夜空 */
            overflow: hidden;
        }
        /* 月饼外层:金黄外皮+圆形+阴影 */
        .mooncake {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: linear-gradient(135deg, #fbbf24, #d97706); /* 金黄渐变外皮 */
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); /* 暖光阴影,更立体 */
            cursor: pointer;
            transition: transform 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* 鼠标悬浮:月饼轻微放大,模拟“被关注” */
        .mooncake:hover {
            transform: scale(1.05);
        }
        /* 月饼花纹:传统“福”字+环形纹路 */
        .mooncake::before {
            content: "福";
            position: absolute;
            font-size: 40px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: bold;
            z-index: 2;
        }
        .mooncake::after {
            content: "";
            position: absolute;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 2px dashed rgba(255, 255, 255, 0.3); /* 环形虚线花纹 */
            z-index: 1;
        }
        /* 流心层:隐藏状态,悬浮时显示并溢出 */
        .filling {
            position: absolute;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(135deg, #fde68a, #fbbf24); /* 奶黄流心色 */
            opacity: 0; /* 初始隐藏 */
            transition: all 0.5s ease;
            z-index: 0;
        }
        .mooncake:hover .filling {
            opacity: 1;
            width: 150px;
            height: 150px;
            box-shadow: 0 0 30px rgba(253, 230, 138, 0.8); /* 流心发光效果 */
        }
        /* 掉落元素样式:玉兔、月亮、桂花 */
        .falling-item {
            position: absolute;
            color: white;
            font-size: 24px;
            opacity: 0;
            animation: fall 3s linear forwards;
        }
        @keyframes fall {
            0% {
                transform: translateY(-50px);
                opacity: 1;
            }
            100% {
                transform: translateY(800px) rotate(360deg);
                opacity: 0;
            }
        }
        /* 祝福弹窗样式 */
        .blessing {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            background: rgba(255, 255, 255, 0.9);
            padding: 20px 40px;
            border-radius: 10px;
            font-size: 22px;
            color: #d97706;
            opacity: 0;
            transition: all 0.5s ease;
            z-index: 100;
        }
        .blessing.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    </style>
</head>
<body>
    <!-- 月饼主体:外层+流心层 -->
    <div class="mooncake">
        <div class="filling"></div>
    </div>
    <!-- 祝福弹窗(默认隐藏) -->
    <div class="blessing" id="blessing"></div>
    <script>
        // 1. 获取元素
        const mooncake = document.querySelector('.mooncake');
        const blessing = document.getElementById('blessing');
        const body = document.body;
        // 2. 中秋祝福文案库(随机切换)
        const blessingTexts = [
            "china马斯克祝大家,中秋快乐!愿你有月饼吃,有月光赏~",
            "月圆人圆事事圆,饼甜情甜家家甜!",
            "一口流心,一口团圆,中秋安康!",
            "今夜月色真美,愿你与所爱共赏~",
            "中秋至,愿日子和月亮一样,越来越圆!"
        ];
        // 3. 点击月饼:弹出祝福+掉落元素
        mooncake.addEventListener('click', () => {
            // 3.1 显示随机祝福
            const randomText = blessingTexts[Math.floor(Math.random() * blessingTexts.length)];
            blessing.textContent = randomText;
            blessing.classList.add('show');
            // 3秒后隐藏祝福
            setTimeout(() => {
                blessing.classList.remove('show');
            }, 3000);
            // 3.2 生成10个随机掉落元素(玉兔、月亮、桂花)
            const items = ['🐇', '🌕', '🌸']; // 玉兔、月亮、桂花图标
            for (let i = 0; i < 10; i++) {
                const item = document.createElement('div');
                item.classList.add('falling-item');
                // 随机选择元素图标
                item.textContent = items[Math.floor(Math.random() * items.length)];
                // 随机位置(左右分散)
                item.style.left = `${Math.random() * 100}vw`;
                // 随机动画延迟(让掉落更有层次感)
                item.style.animationDelay = `${Math.random() * 2}s`;
                // 添加到页面
                body.appendChild(item);
                // 3秒后移除元素,避免占用内存
                setTimeout(() => {
                    body.removeChild(item);
                }, 3000);
            }
        });
    </script>
</body>
</html>