js+css实现小学成语对对碰消消乐教学游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js+css实现小学成语对对碰消消乐教学游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🧩 成语对对碰 - 小学儿童版</title>
    <style>
        :root {
            --bg-start: #e0f7fa;
            --bg-end: #fce4ec;
            --card-left: #fff3e0;
            --card-left-border: #ff9800;
            --card-left-hover: #ffe0b2;
            --card-right: #e8f5e9;
            --card-right-border: #4caf50;
            --card-right-hover: #c8e6c9;
            --card-selected: #fff9c4;
            --card-selected-border: #fbc02d;
            --card-success: #c8e6c9;
            --card-success-border: #388e3c;
            --card-error: #ffcdd2;
            --card-error-border: #d32f2f;
            --text-dark: #37474f;
            --text-light: #546e7a;
            --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.18);
            --shadow-selected: 0 6px 20px rgba(251, 192, 45, 0.45);
            --radius: 18px;
            --radius-sm: 12px;
            --font-title: 'STKaiti', 'KaiTi', '楷体', 'Noto Serif SC', 'SimSun', serif;
            --font-body: 'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Noto Sans SC', sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-body);
            min-height: 100vh;
            background: linear-gradient(160deg, #e8f8ff 0%, #e0f7fa 15%, #f0f4ff 35%, #fff0f5 55%, #fce4ec 75%, #f3e5f5 100%);
            background-attachment: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 16px;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            position: relative;
            overflow-x: hidden;
        }

        /* 背景装饰 */
        .bg-decoration {
            position: fixed;
            pointer-events: none;
            z-index: 0;
            font-size: 3rem;
            opacity: 0.3;
            animation: floatAround 20s infinite ease-in-out;
        }
        .bg-decoration:nth-child(1) {
            top: 5%;
            left: 5%;
            animation-delay: 0s;
            font-size: 3.5rem;
        }
        .bg-decoration:nth-child(2) {
            top: 12%;
            right: 8%;
            animation-delay: -5s;
            font-size: 2.8rem;
        }
        .bg-decoration:nth-child(3) {
            bottom: 15%;
            left: 10%;
            animation-delay: -10s;
            font-size: 3.2rem;
        }
        .bg-decoration:nth-child(4) {
            bottom: 8%;
            right: 6%;
            animation-delay: -15s;
            font-size: 3rem;
        }
        .bg-decoration:nth-child(5) {
            top: 40%;
            left: 3%;
            animation-delay: -7s;
            font-size: 2.5rem;
        }
        .bg-decoration:nth-child(6) {
            top: 50%;
            right: 4%;
            animation-delay: -12s;
            font-size: 2.6rem;
        }

        @keyframes floatAround {
            0%,
            100% {
                transform: translateY(0) translateX(0) rotate(0deg) scale(1);
            }
            15% {
                transform: translateY(-25px) translateX(15px) rotate(6deg) scale(1.12);
            }
            30% {
                transform: translateY(-10px) translateX(-10px) rotate(-4deg) scale(0.92);
            }
            45% {
                transform: translateY(-30px) translateX(-18px) rotate(8deg) scale(1.08);
            }
            60% {
                transform: translateY(8px) translateX(12px) rotate(-5deg) scale(0.95);
            }
            75% {
                transform: translateY(-15px) translateX(20px) rotate(3deg) scale(1.06);
            }
            90% {
                transform: translateY(5px) translateX(-8px) rotate(-3deg) scale(0.98);
            }
        }

        /* 主容器 */
        .game-container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 750px;
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 28px;
            padding: 28px 22px 22px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
            border: 2px solid rgba(255, 255, 255, 0.7);
        }

        /* 头部 */
        .game-header {
            text-align: center;
            margin-bottom: 20px;
            position: relative;
        }
        .game-title {
            font-family: var(--font-title);
            font-size: 2.4rem;
            font-weight: bold;
            background: linear-gradient(135deg, #ff6b6b, #ff8e53, #ffc107, #ff6b6b);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            animation: titleShine 4s ease-in-out infinite;
            display: inline-block;
            letter-spacing: 3px;
            margin-bottom: 4px;
        }
        .game-subtitle {
            font-size: 0.95rem;
            color: #888;
       .........完整代码请登录后点击上方下载按钮下载查看