关于豆包网页版的Vibe Coding体验

三季有玖2026-04-09 12:10

上周习惯使用豆包AI辅助办公时，注意到豆包还有专门的【编程】模块。虽然Python程序可能需要复制到本地的PyCharm运行，但我想到网页前端未必哇！应该在对话框就能展示效果。

开整开整！愚人节将至，就这个主题和豆包探讨一番，让它给我整个逗乐同事的抽卡小游戏。

我让豆包写了一个愚人节抽卡小游戏

Vibe Coding 小剧场

**我：**帮我写一个前端抽卡界面 可以自定义替换图像的

豆包： 给你写一个超好看、可自定义图片、带抽卡动画、100% 纯前端 的抽卡界面！直接保存成 .html 打开就能用，图片你想换啥就换啥，操作超级简单～

**我：**要愚人节主题的 我朋友名字叫张子杰 抽到的卡片加上文字说明 （喂！(#`O′)！ 你这是拿豆包当许愿池里的王八了！）

豆包：大人，十连抽奉上：🤡 zzj 愚人节 10 连抽・搞怪猫狗版（完整代码）

超搞怪表情包 + 可爱小猫小狗，文字也更有趣，直接复制就能用，效果超好玩 🤡🐱🐶

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>愚人节快乐 · zzj 专属10连抽 🤡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #4158D0, #C850C0, #FFCC70);
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .title {
            font-size: 34px;
            color: #fff;
            margin: 10px 0;
            font-weight: bold;
            text-align: center;
            text-shadow: 0 0 10px rgba(0,0,0,0.3);
        }

        .sub-title {
            font-size: 18px;
            margin-bottom: 20px;
            color: #fff;
        }

        .card-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
            max-width: 900px;
            margin-bottom: 30px;
        }

        .card-box {
            width: 150px;
            height: 200px;
            perspective: 1000px;
        }

        .card {
            width: 100%;
            height: 100%;
            border-radius: 12px;
            position: relative;
            transition: transform 0.6s ease;
            transform-style: preserve-3d;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .card.flip {
            transform: rotateY(180deg);
        }

        .front, .back {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px;
        }

        .front {
            background: #222;
            color: #ffda36;
            font-size: 16px;
            font-weight: bold;
        }

        .back {
            transform: rotateY(180deg);
            background: #fff;
            text-align: center;
        }

        .back img {
            width: 100%;
            height: 140px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 8px;
        }

        .card-text {
            font-size: 14px;
            color: #222;
            font-weight: bold;
            line-height: 1.3;
        }

        #drawBtn {
            padding: 14px 40px;
            font-size: 18px;
            background: #ff3636;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 5px 15px rgba(255,54,54,0.4);
        }

        #drawBtn:hover {
            background: #ff1a1a;
            transform: scale(1.05);
        }
    </style>
</head>

<body>
    <div class="title">🤡 愚人节快乐 · zzj 专属10连抽 🤡</div>
    <div class="sub-title">点击按钮，开启猫狗整活10连抽～</div>

    <div class="card-container" id="cardContainer"></div>

    <button id="drawBtn">开启10连抽</button>

    <script>
        // ====================== 搞怪猫狗图片已替换完成 ======================
        const cardList = [
            { img: "https://i.imgur.com/7th63LH.jpeg", text: "🐱 小猫祝你愚人节快乐" },
            { img: "https://i.imgur.com/KH72bBV.jpeg", text: "🐶 小狗说你今天超可爱" },
            { img: "https://i.imgur.com/2d2BZpN.jpeg", text: "🤪 被小猫狠狠拿捏了" },
            { img: "https://i.imgur.com/DA0W5mH.jpeg", text: "😜 小狗偷偷整蛊你一下" },
            { img: "https://i.imgur.com/3UUKzxH.jpeg", text: "😎 修狗帅气，愚人快乐" },
            { img: "https://i.imgur.com/2nVvH9q.jpeg", text: "🙈 小猫害羞，不许笑我" },
            { img: "https://i.imgur.com/D0nJz9Q.jpeg", text: "🐕 快乐小狗，天天开心" },
            { img: "https://i.imgur.com/YuJzJ1b.jpeg", text: "😼 小猫警告：今天别被骗" },
            { img: "https://i.imgur.com/3XbV0gH.jpeg", text: "🥳 zzj 愚人节快乐加倍" },
            { img: "https://i.imgur.com/6nV9X7q.jpeg",text: "❤️ 猫狗双全，快乐无限" }
        ];
        // =====================================================================

        const container = document.getElementById("cardContainer");
        const drawBtn = document.getElementById("drawBtn");

        function createCards() {
            container.innerHTML = "";
            for (let i = 0; i < 10; i++) {
                const cardBox = document.createElement("div");
                cardBox.className = "card-box";
                cardBox.innerHTML = `
                    <div class="card" id="card${i}">
                        <div class="front">愚人节整活卡</div>
                        <div class="back">
                            <img id="img${i}">
                            <div class="card-text" id="text${i}"></div>
                        </div>
                    </div>
                `;
                container.appendChild(cardBox);
            }
        }

        drawBtn.addEventListener("click", () => {
            drawBtn.disabled = true;
            drawBtn.innerText = "抽卡中...";
            createCards();

            let delay = 0;
            for (let i = 0; i < 10; i++) {
                setTimeout(() => {
                    const card = document.getElementById(`card${i}`);
                    const img = document.getElementById(`img${i}`);
                    const text = document.getElementById(`text${i}`);
                    
                    const randomCard = cardList[Math.floor(Math.random() * cardList.length)];
                    img.src = randomCard.img;
                    text.innerText = randomCard.text;
                    
                    card.classList.add("flip");

                    if (i === 9) {
                        drawBtn.disabled = false;
                        drawBtn.innerText = "再次10连抽";
                    }
                }, delay);
                delay += 200;
            }
        });

        createCards();
    </script>
</body>
</html>

我：效果还要更加精进才是~ ( 继续沟通互相折磨花式许愿🙏 )
微博图片版的不显示（豆包承诺图片稳定可显示）

= = = 》还是我：要旋转抽卡的界面！= = = 》

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>愚人节快乐 · zzj 旋转抽卡 🤡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #4158D0, #C850C0, #FFCC70);
            font-family: "Microsoft YaHei", sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .title {
            font-size: 32px;
            color: #fff;
            margin-bottom: 10px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(0,0,0,0.3);
            text-align: center;
        }

        .sub-title {
            color: #fff;
            margin-bottom: 40px;
            font-size: 16px;
        }

        /* 旋转容器 */
        .wheel-box {
            position: relative;
            width: 420px;
            height: 420px;
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 中心柱子 */
        .center-pole {
            width: 60px;
            height: 60px;
            background: #ffda36;
            border-radius: 50%;
            position: relative;
            z-index: 10;
            box-shadow: 0 0 20px rgba(255,218,54,0.7);
        }

        /* 卡片样式 */
        .card {
            width: 120px;
            height: 160px;
            background: white;
            border-radius: 10px;
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
        }

        .card img {
            width: 100px;
            height: 110px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 6px;
        }

        .card-text {
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            color: #222;
        }

        /* 旋转动画 */
        .rotate {
            animation: rotateWheel 2.5s ease-out forwards;
        }

        @keyframes rotateWheel {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(1440deg); }
        }

        /* 按钮 */
        #drawBtn {
            padding: 14px 40px;
            font-size: 18px;
            background: #ff3636;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 5px 15px rgba(255,54,54,0.4);
        }

        #drawBtn:hover {
            background: #ff1a1a;
            transform: scale(1.05);
        }

        #drawBtn:disabled {
            background: #999;
            cursor: not-allowed;
        }

        /* 结果展示 */
        .result-box {
            margin-top: 30px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
            opacity: 0;
            transition: opacity 1s ease;
        }

        .result-box.show {
            opacity: 1;
        }

        .result-card {
            width: 100px;
            height: 140px;
            background: #fff;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 6px;
        }

        .result-card img {
            width: 80px;
            height: 90px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <div class="title">🤡 愚人节快乐 · zzj 旋转抽卡 🤡</div>
    <div class="sub-title">点击按钮，开启旋转抽卡～</div>

    <!-- 旋转轮盘 -->
    <div class="wheel-box" id="wheel">
        <div class="center-pole"></div>
        <div class="card" id="c1"><img src=""><div class="card-text"></div></div>
        <div class="card" id="c2"><img src=""><div class="card-text"></div></div>
        <div class="card" id="c3"><img src=""><div class="card-text"></div></div>
        <div class="card" id="c4"><img src=""><div class="card-text"></div></div>
        <div class="card" id="c5"><img src=""><div class="card-text"></div></div>
        <div class="card" id="c6"><img src=""><div class="card-text"></div></div>
    </div>

    <button id="drawBtn">开始旋转抽卡</button>

    <!-- 结果区域 -->
    <div class="result-box" id="resultBox"></div>

    <script>
        const imgUrl = "https://img95.699pic.com/photo/50531/9224.jpg";
        const textStr = "小猫祝你愚人节快乐";

        const wheel = document.getElementById("wheel");
        const drawBtn = document.getElementById("drawBtn");
        const resultBox = document.getElementById("resultBox");
        const cards = document.querySelectorAll(".card");

        // 初始化6张卡片
        function initCards() {
            cards.forEach(c => {
                c.querySelector("img").src = imgUrl;
                c.querySelector(".card-text").innerText = textStr;
            });
        }

        // 抽卡旋转
        drawBtn.addEventListener("click", () => {
            drawBtn.disabled = true;
            drawBtn.innerText = "旋转中...";
            resultBox.classList.remove("show");
            resultBox.innerHTML = "";

            wheel.classList.add("rotate");

            setTimeout(() => {
                wheel.classList.remove("rotate");
                showResult();
            }, 2500);
        });

        // 显示结果（4张）
        function showResult() {
            for(let i=0;i<4;i++){
                const div = document.createElement("div");
                div.className = "result-card";
                div.innerHTML = `
                    <img src="${imgUrl}">
                    <div class="card-text">${textStr}</div>
                `;
                resultBox.appendChild(div);
            }
            resultBox.classList.add("show");
            drawBtn.disabled = false;
            drawBtn.innerText = "再次旋转抽卡";
        }

        initCards();
    </script>
</body>
</html>

= = = 》还是我：不是平面的旋转 是立体的旋转！= = = 》

豆包：

豆包生成的雷霆旋转版本一

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>愚人节快乐 · zzj 3D旋转抽卡 🤡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #4158D0, #C850C0, #FFCC70);
            font-family: "Microsoft YaHei", sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .title {
            font-size: 32px;
            color: #fff;
            margin-bottom: 10px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(0,0,0,0.3);
            text-align: center;
        }

        .sub-title {
            color: #fff;
            margin-bottom: 30px;
            font-size: 16px;
        }

        /* 3D 旋转容器 */
        .wheel-box {
            position: relative;
            width: 400px;
            height: 400px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
            perspective: 1200px;
        }

        /* 中心柱子 */
        .center-pole {
            width: 60px;
            height: 60px;
            background: #ffda36;
            border-radius: 50%;
            position: relative;
            z-index: 10;
            box-shadow: 0 0 30px rgba(255,218,54,0.8);
            transform: translateZ(20px);
        }

        /* 3D 卡片环绕 */
        .card {
            width: 110px;
            height: 150px;
            background: white;
            border-radius: 10px;
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }

        .card img {
            width: 90px;
            height: 100px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 6px;
        }

        .card-text {
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            color: #222;
        }

        /* 3D 立体旋转动画 */
        .rotate-3d {
            animation: rotate3D 2.8s ease-out forwards;
        }

        @keyframes rotate3D {
            0% { transform: rotateY(0deg) rotateX(0deg); }
            100% { transform: rotateY(1440deg) rotateX(360deg); }
        }

        /* 按钮 */
        #drawBtn {
            padding: 14px 40px;
            font-size: 18px;
            background: #ff3636;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 5px 15px rgba(255,54,54,0.4);
        }

        #drawBtn:hover {
            background: #ff1a1a;
            transform: scale(1.05);
        }

        #drawBtn:disabled {
            background: #999;
            cursor: not-allowed;
        }

        /* 结果展示 */
        .result-box {
            margin-top: 20px;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
            opacity: 0;
            transition: opacity 1s ease;
        }

        .result-box.show {
            opacity: 1;
        }

        .result-card {
            width: 100px;
            height: 140px;
            background: #fff;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 6px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        .result-card img {
            width: 80px;
            height: 90px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <div class="title">🤡 愚人节快乐 · zzj 3D旋转抽卡 🤡</div>
    <div class="sub-title">点击按钮，开启立体旋转抽卡～</div>

    <!-- 3D 旋转轮盘 -->
    <div class="wheel-box" id="wheel">
        <div class="center-pole"></div>
        <div class="card" id="c1"><img src=""><div class="card-text"></div></div>
        <div class="card" id="c2"><img src=""><div class="card-text"></div></div>
        <div class="card" id="c3"><img src=""><div class="card-text"></div></div>
        <div class="card" id="c4"><img src=""><div class="card-text"></div></div>
        <div class="card" id="c5"><img src=""><div class="card-text"></div></div>
        <div class="card" id="c6"><img src=""><div class="card-text"></div></div>
    </div>

    <button id="drawBtn">开始旋转抽卡</button>

    <!-- 结果区域 -->
    <div class="result-box" id="resultBox"></div>

    <script>
        // 你指定的小猫图片 + 统一文字
        const imgUrl = "https://img95.699pic.com/photo/50531/9224.jpg";
        const textStr = "小猫祝你愚人节快乐";

        const wheel = document.getElementById("wheel");
        const drawBtn = document.getElementById("drawBtn");
        const resultBox = document.getElementById("resultBox");
        const cards = document.querySelectorAll(".card");

        // 初始化6张卡片
        function initCards() {
            cards.forEach((c, index) => {
                c.querySelector("img").src = imgUrl;
                c.querySelector(".card-text").innerText = textStr;
                
                // 3D环绕布局
                const angle = (index / 6) * 360;
                c.style.transform = `rotateY(${angle}deg) translateZ(160px)`;
            });
        }

        // 3D旋转抽卡
        drawBtn.addEventListener("click", () => {
            drawBtn.disabled = true;
            drawBtn.innerText = "旋转中...";
            resultBox.classList.remove("show");
            resultBox.innerHTML = "";

            wheel.classList.add("rotate-3d");

            setTimeout(() => {
                wheel.classList.remove("rotate-3d");
                showResult();
            }, 2800);
        });

        // 显示4张结果
        function showResult() {
            for(let i=0;i<4;i++){
                const div = document.createElement("div");
                div.className = "result-card";
                div.innerHTML = `
                    <img src="${imgUrl}">
                    <div class="card-text">${textStr}</div>
                `;
                resultBox.appendChild(div);
            }
            resultBox.classList.add("show");
            drawBtn.disabled = false;
            drawBtn.innerText = "再次旋转抽卡";
        }

        initCards();
    </script>
</body>
</html>

(这里只是一个灵感小样Demo，图片显示解决见后文)

豆包生成的我喜欢的版本二

我：[扶额🤦‍♀️] 转圈是显示卡牌的背面 结果是一张图 显示卡牌正面的锥桶

ok.

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>愚人节快乐 · zzj 3D旋转抽卡 🤡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #4158D0, #C850C0, #FFCC70);
            font-family: "Microsoft YaHei", sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .title {
            font-size: 32px;
            color: #fff;
            margin-bottom: 10px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(0,0,0,0.3);
            text-align: center;
        }

        .sub-title {
            color: #fff;
            margin-bottom: 30px;
            font-size: 16px;
        }

        /* 3D 旋转容器 */
        .wheel-box {
            position: relative;
            width: 400px;
            height: 400px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
            perspective: 1200px;
        }

        /* 中心柱子 */
        .center-pole {
            width: 60px;
            height: 60px;
            background: #ffda36;
            border-radius: 50%;
            position: relative;
            z-index: 10;
            box-shadow: 0 0 30px rgba(255,218,54,0.8);
            transform: translateZ(20px);
        }

        /* 3D 卡片 - 旋转时显示背面 */
        .card {
            width: 110px;
            height: 150px;
            background: #ff3636;
            border-radius: 10px;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }

        /* 3D 立体旋转动画 */
        .rotate-3d {
            animation: rotate3D 2.8s ease-out forwards;
        }

        @keyframes rotate3D {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(1440deg); }
        }

        /* 按钮 */
        #drawBtn {
            padding: 14px 40px;
            font-size: 18px;
            background: #ff3636;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 5px 15px rgba(255,54,54,0.4);
        }

        #drawBtn:hover {
            background: #ff1a1a;
            transform: scale(1.05);
        }

        #drawBtn:disabled {
            background: #999;
            cursor: not-allowed;
        }

        /* 结果展示 - 只显示1张正面图 */
        .result-box {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            opacity: 0;
            transition: opacity 1s ease;
        }

        .result-box.show {
            opacity: 1;
        }

        .result-card {
            width: 120px;
            height: 160px;
            background: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }

        .result-card img {
            width: 100px;
            height: 110px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 8px;
        }

        .result-text {
            font-size: 14px;
            font-weight: bold;
            color: #222;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="title">🤡 愚人节快乐 · zzj 3D旋转抽卡 🤡</div>
    <div class="sub-title">点击按钮，开启立体旋转抽卡～</div>

    <!-- 3D 旋转轮盘 -->
    <div class="wheel-box" id="wheel">
        <div class="center-pole"></div>
        <div class="card">背</div>
        <div class="card">面</div>
        <div class="card">卡</div>
        <div class="card">片</div>
        <div class="card">旋</div>
        <div class="card">转</div>
    </div>

    <button id="drawBtn">开始旋转抽卡</button>

    <!-- 结果区域：只显示1张 -->
    <div class="result-box" id="resultBox"></div>

    <script>
        // 你指定的锥桶图片 + 统一文字
        const imgUrl = "https://bpic.588ku.com/element_origin_min_pic/21/08/13/aca4c973e14be42c1410dc01e29b15d6.jpg";
        const textStr = "小猫祝你愚人节快乐";

        const wheel = document.getElementById("wheel");
        const drawBtn = document.getElementById("drawBtn");
        const resultBox = document.getElementById("resultBox");
        const cards = document.querySelectorAll(".card");

        // 初始化6张背面卡片
        function initCards() {
            cards.forEach((c, index) => {
                const angle = (index / 6) * 360;
                c.style.transform = `rotateY(${angle}deg) translateZ(160px)`;
            });
        }

        // 3D旋转抽卡
        drawBtn.addEventListener("click", () => {
            drawBtn.disabled = true;
            drawBtn.innerText = "旋转中...";
            resultBox.classList.remove("show");
            resultBox.innerHTML = "";

            wheel.classList.add("rotate-3d");

            setTimeout(() => {
                wheel.classList.remove("rotate-3d");
                showResult();
            }, 2800);
        });

        // 只显示 1 张结果（正面）
        function showResult() {
            const div = document.createElement("div");
            div.className = "result-card";
            div.innerHTML = `
                <img src="${imgUrl}">
                <div class="result-text">${textStr}</div>
            `;
            resultBox.appendChild(div);
            resultBox.classList.add("show");
            
            drawBtn.disabled = false;
            drawBtn.innerText = "再次旋转抽卡";
        }

        initCards();
    </script>
</body>
</html>

我综合修改后的确定版本三

最终我还是选择了雷霆旋转版和版本二的结合，还可以随机修改单抽掉率。

另：

a. 抽卡结果不下滑一眼看到版

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>愚人节快乐 · zzj 3D旋转抽卡 🤡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #4158D0, #C850C0, #FFCC70);
            font-family: "Microsoft YaHei", sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            position: relative;
        }

        .title {
            font-size: 32px;
            color: #fff;
            margin-bottom: 10px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(0,0,0,0.3);
            text-align: center;
        }

        .sub-title {
            color: #fff;
            margin-bottom: 30px;
            font-size: 16px;
        }

        .wheel-box {
            position: relative;
            width: 400px;
            height: 400px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
            perspective: 1200px;
        }

        .center-pole {
            width: 60px;
            height: 60px;
            background: #ffda36;
            border-radius: 50%;
            position: relative;
            z-index: 10;
            box-shadow: 0 0 30px rgba(255,218,54,0.8);
            transform: translateZ(20px);
        }

        .card {
            width: 110px;
            height: 150px;
            background: #ff3636;
            border-radius: 10px;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: white;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }

        .rotate-3d {
            animation: rotate3D 2.8s ease-out forwards;
        }

        @keyframes rotate3D {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(1440deg); }
        }

        #drawBtn {
            padding: 14px 40px;
            font-size: 18px;
            background: #ff3636;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 5px 15px rgba(255,54,54,0.4);
        }

        #drawBtn:hover {
            background: #ff1a1a;
            transform: scale(1.05);
        }

        #drawBtn:disabled {
            background: #999;
            cursor: not-allowed;
        }

        /* 🔥 核心修改：结果固定在屏幕正中间 */
        .result-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            opacity: 0;
            transition: opacity 1s ease;
        }

        .result-box.show {
            opacity: 1;
        }

        .result-card {
            width: 160px;
            height: 200px;
            background: #fff;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 15px;
            box-shadow: 0 0 30px rgba(0,0,0,0.4);
        }

        .result-card img {
            width: 130px;
            height: 140px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .result-text {
            font-size: 16px;
            font-weight: bold;
            color: #222;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="title">🤡 愚人节快乐 · zzj 3D旋转抽卡 🤡</div>
    <div class="sub-title">点击按钮，开启立体旋转抽卡～</div>

    <div class="wheel-box" id="wheel">
        <div class="center-pole"></div>
        <div class="card">背</div>
        <div class="card">面</div>
        <div class="card">旋</div>
        <div class="card">转</div>
        <div class="card">中</div>
        <div class="card">🎡</div>
    </div>

    <button id="drawBtn">开始旋转抽卡</button>
    <div class="result-box" id="resultBox"></div>

    <script>
        // 两张图片随机抽取
        const resultImages = [
            "https://bpic.588ku.com/element_origin_min_pic/21/08/13/aca4c973e14be42c1410dc01e29b15d6.jpg",
            "https://img.alicdn.com/bao/uploaded/i2/2407458426/O1CN01O4CmDz2C79sbaDj7S_!!2407458426.jpg"
        ];
        const textStr = "小猫祝你愚人节快乐";

        const wheel = document.getElementById("wheel");
        const drawBtn = document.getElementById("drawBtn");
        const resultBox = document.getElementById("resultBox");
        const cards = document.querySelectorAll(".card");

        function initCards() {
            cards.forEach((c, index) => {
                const angle = (index / 6) * 360;
                c.style.transform = `rotateY(${angle}deg) translateZ(160px)`;
            });
        }

        drawBtn.addEventListener("click", () => {
            drawBtn.disabled = true;
            drawBtn.innerText = "旋转中...";
            resultBox.classList.remove("show");
            resultBox.innerHTML = "";

            wheel.classList.add("rotate-3d");

            setTimeout(() => {
                wheel.classList.remove("rotate-3d");
                showResult();
            }, 2800);
        });

        // 随机出1张结果
        function showResult() {
            const randomImg = resultImages[Math.floor(Math.random() * resultImages.length)];
            const div = document.createElement("div");
            div.className = "result-card";
            div.innerHTML = `
                <img src="${randomImg}">
                <div class="result-text">${textStr}</div>
            `;
            resultBox.appendChild(div);
            resultBox.classList.add("show");
            
            drawBtn.disabled = false;
            drawBtn.innerText = "再次旋转抽卡";
        }

        initCards();
    </script>
</body>
</html>

b. 卡面美化升级镶金边版

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>愚人节快乐 · zzj 3D旋转抽卡 🤡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #4158D0, #C850C0, #FFCC70);
            font-family: "Microsoft YaHei", sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            position: relative;
        }

        .title {
            font-size: 32px;
            color: #fff;
            margin-bottom: 10px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(0,0,0,0.3);
            text-align: center;
        }

        .sub-title {
            color: #fff;
            margin-bottom: 30px;
            font-size: 16px;
        }

        .wheel-box {
            position: relative;
            width: 400px;
            height: 400px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
            perspective: 1200px;
        }

        .center-pole {
            width: 60px;
            height: 60px;
            background: #ffda36;
            border-radius: 50%;
            position: relative;
            z-index: 10;
            box-shadow: 0 0 30px rgba(255,218,54,0.8);
            transform: translateZ(20px);
        }

        /* 🔥🔥🔥 超级美化：卡片背面 高级质感 */
        .card {
            width: 110px;
            height: 150px;
            background: linear-gradient(135deg, #ff5252, #b71c1c);
            border-radius: 12px;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: rgba(255,255,255,0.9);
            font-weight: bold;
            box-shadow: 0 8px 20px rgba(0,0,0,0.35), 
                        inset 0 2px 4px rgba(255,255,255,0.25);
            border: 3px solid rgba(255, 215, 0, 0.7);
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            transform-style: preserve-3d;
            backface-visibility: hidden;
            overflow: hidden;
        }

        /* 卡背装饰光效 */
        .card::before {
            content: "";
            position: absolute;
            width: 120%;
            height: 20px;
            background: rgba(255,255,255,0.15);
            transform: rotate(35deg);
        }

        .rotate-3d {
            animation: rotate3D 2.8s ease-out forwards;
        }

        @keyframes rotate3D {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(1440deg); }
        }

        #drawBtn {
            padding: 14px 40px;
            font-size: 18px;
            background: #ff3636;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 5px 15px rgba(255,54,54,0.4);
        }

        #drawBtn:hover {
            background: #ff1a1a;
            transform: scale(1.05);
        }

        #drawBtn:disabled {
            background: #999;
            cursor: not-allowed;
        }

        .result-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            opacity: 0;
            transition: opacity 1s ease;
        }

        .result-box.show {
            opacity: 1;
        }

        .result-card {
            width: 160px;
            height: 200px;
            background: #fff;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 15px;
            box-shadow: 0 0 40px rgba(0,0,0,0.5);
            border: 3px solid #ffd700;
        }

        .result-card img {
            width: 130px;
            height: 140px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .result-text {
            font-size: 16px;
            font-weight: bold;
            color: #222;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="title">🤡 愚人节快乐 · zzj 3D旋转抽卡 🤡</div>
    <div class="sub-title">点击按钮，开启立体旋转抽卡～</div>

    <div class="wheel-box" id="wheel">
        <div class="center-pole"></div>
        <div class="card">★</div>
        <div class="card">★</div>
        <div class="card">★</div>
        <div class="card">★</div>
        <div class="card">★</div>
        <div class="card">★</div>
    </div>

    <button id="drawBtn">开始旋转抽卡</button>
    <div class="result-box" id="resultBox"></div>

    <script>
        const resultImages = [
            "https://bpic.588ku.com/element_origin_min_pic/21/08/13/aca4c973e14be42c1410dc01e29b15d6.jpg",
            "https://img.alicdn.com/bao/uploaded/i2/2407458426/O1CN01O4CmDz2C79sbaDj7S_!!2407458426.jpg"
        ];
        const textStr = "小猫祝你愚人节快乐";

        const wheel = document.getElementById("wheel");
        const drawBtn = document.getElementById("drawBtn");
        const resultBox = document.getElementById("resultBox");
        const cards = document.querySelectorAll(".card");

        function initCards() {
            cards.forEach((c, index) => {
                const angle = (index / 6) * 360;
                c.style.transform = `rotateY(${angle}deg) translateZ(160px)`;
            });
        }

        drawBtn.addEventListener("click", () => {
            drawBtn.disabled = true;
            drawBtn.innerText = "旋转中...";
            resultBox.classList.remove("show");
            resultBox.innerHTML = "";

            wheel.classList.add("rotate-3d");

            setTimeout(() => {
                wheel.classList.remove("rotate-3d");
                showResult();
            }, 2800);
        });

        function showResult() {
            const randomImg = resultImages[Math.floor(Math.random() * resultImages.length)];
            const div = document.createElement("div");
            div.className = "result-card";
            div.innerHTML = `
                <img src="${randomImg}">
                <div class="result-text">${textStr}</div>
            `;
            resultBox.appendChild(div);
            resultBox.classList.add("show");
            
            drawBtn.disabled = false;
            drawBtn.innerText = "再次旋转抽卡";
        }

        initCards();
    </script>
</body>
</html>

附带我思考部分的一些说明

说明：1. 豆包给我的图片链接，除了最初的'来源未知青春文艺风图片'，后来我让它修改的，一张图都呈现不了。我只好发给它我准备好的图片链接，让它加到代码里。这才有了后来的图片显示。

俺这辈子也算在豆包这里cos上研究生导师了~ [捂脸🤦‍♀️]

随便搜了一个可以访问的锥桶图片，让豆包安排上。

对此，张子杰同学意见如下：

于是我让豆包又安排了两只老虎🐅，抽到的张子杰同学表示：好耶！

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>愚人节快乐 · zzj 3D旋转抽卡 🤡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #4158D0, #C850C0, #FFCC70);
            font-family: "Microsoft YaHei", sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .title {
            font-size: 32px;
            color: #fff;
            margin-bottom: 10px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(0,0,0,0.3);
            text-align: center;
        }

        .sub-title {
            color: #fff;
            margin-bottom: 30px;
            font-size: 16px;
        }

        .wheel-box {
            position: relative;
            width: 400px;
            height: 400px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
            perspective: 1200px;
        }

        .center-pole {
            width: 60px;
            height: 60px;
            background: #ffda36;
            border-radius: 50%;
            position: relative;
            z-index: 10;
            box-shadow: 0 0 30px rgba(255,218,54,0.8);
            transform: translateZ(20px);
        }

        .card {
            width: 110px;
            height: 150px;
            background: #ff3636;
            border-radius: 10px;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: white;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }

        .rotate-3d {
            animation: rotate3D 2.8s ease-out forwards;
        }

        @keyframes rotate3D {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(1440deg); }
        }

        #drawBtn {
            padding: 14px 40px;
            font-size: 18px;
            background: #ff3636;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 5px 15px rgba(255,54,54,0.4);
        }

        #drawBtn:hover {
            background: #ff1a1a;
            transform: scale(1.05);
        }

        #drawBtn:disabled {
            background: #999;
            cursor: not-allowed;
        }

        .result-box {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            opacity: 0;
            transition: opacity 1s ease;
        }

        .result-box.show {
            opacity: 1;
        }

        .result-card {
            width: 120px;
            height: 160px;
            background: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }

        .result-card img {
            width: 100px;
            height: 110px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 8px;
        }

        .result-text {
            font-size: 14px;
            font-weight: bold;
            color: #222;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="title">🤡 愚人节快乐 · zzj 3D旋转抽卡 🤡</div>
    <div class="sub-title">点击按钮，开启立体旋转抽卡～</div>

    <div class="wheel-box" id="wheel">
        <div class="center-pole"></div>
        <div class="card">背</div>
        <div class="card">面</div>
        <div class="card">旋</div>
        <div class="card">转</div>
        <div class="card">中</div>
        <div class="card">🎡</div>
    </div>

    <button id="drawBtn">开始旋转抽卡</button>
    <div class="result-box" id="resultBox"></div>

    <script>
        // 两张图片随机抽取
        const resultImages = [
            "https://bpic.588ku.com/element_origin_min_pic/21/08/13/aca4c973e14be42c1410dc01e29b15d6.jpg",
            "https://img.alicdn.com/bao/uploaded/i2/2407458426/O1CN01O4CmDz2C79sbaDj7S_!!2407458426.jpg"
        ];
        const textStr = "小猫祝你愚人节快乐";

        const wheel = document.getElementById("wheel");
        const drawBtn = document.getElementById("drawBtn");
        const resultBox = document.getElementById("resultBox");
        const cards = document.querySelectorAll(".card");

        function initCards() {
            cards.forEach((c, index) => {
                const angle = (index / 6) * 360;
                c.style.transform = `rotateY(${angle}deg) translateZ(160px)`;
            });
        }

        drawBtn.addEventListener("click", () => {
            drawBtn.disabled = true;
            drawBtn.innerText = "旋转中...";
            resultBox.classList.remove("show");
            resultBox.innerHTML = "";

            wheel.classList.add("rotate-3d");

            setTimeout(() => {
                wheel.classList.remove("rotate-3d");
                showResult();
            }, 2800);
        });

        // 随机出1张结果
        function showResult() {
            const randomImg = resultImages[Math.floor(Math.random() * resultImages.length)];
            const div = document.createElement("div");
            div.className = "result-card";
            div.innerHTML = `
                <img src="${randomImg}">
                <div class="result-text">${textStr}</div>
            `;
            resultBox.appendChild(div);
            resultBox.classList.add("show");
            
            drawBtn.disabled = false;
            drawBtn.innerText = "再次旋转抽卡";
        }

        initCards();
    </script>
</body>
</html>

总结：AI编程是有趣的，AI可以帮你写代码，你也可以在这个过程中尝试修改、学到东西，但核心还是人的需求和创意。能引起他人共鸣的脑洞，是最珍贵的财富。

附1：豆包向你解释什么是vibe coding

附2：提问豆包时的三种模型：快速/思考/专家

我随口提问简单问题问着玩时，用的是"快速"。干活时会开"思考"。"专家"用的确实比较少。感觉"思考"的时间性价比蛮高。（豆包打开对话框默认是"快速"，产品很懂如何普及到万千用户）

我还问了豆包，为什么它说话那么有人味，比起别家AI，更能给我情绪价值。

对此，我和朋友的意见如下：感动得不要不要的~

但还是决定通报豆包的缺陷------

注意注意！豆包好多次乱编参考链接被我抓获且不改，给的链接访问不了或者根本不存在。尤其是娱乐方面的视频采访。我记得某导演说的一些话，让它帮我找视频的出处，做的很糟糕。看来人类解码视频中的信息还需未知时日，尤其是无字幕的视频，现在的成果还是太有限了。（感觉语音和图文已经被解码差不多了，但ai配音的情感和断字、连贯还是有待提升，ai优化一下可以读书，影视广播剧创作这种，害得是人配音。）

吐槽：侧边栏展示真的非常方便哇~ 为啥我插入CSDN的代码块，选的是HTML，没法直接展示？！

相关推荐
子昕2 小时前
OpenClaw刚火，Hermes Agent又爆了：AI正在发生一个关键变化！
ai编程
汤面不加鱼丸3 小时前
Vibe Coding初体验之Trae CN
ai编程
迷途酱3 小时前
告别"玩具项目"：用 MCP 协议让你的 AI Agent 真正干活
ai编程·mcp
Light603 小时前
源码泄露VS工业革命：Claude Code与领码SPARK VIEW的AI编程范式对决
ai编程·配置即代码·源码泄露·claude code·spark view·技术范式
小手智联老徐3 小时前
OpenClaw 三小时连更三个版本
llm·ai编程·openclaw
与虾牵手4 小时前
OpenClaw 省钱方案：2026 年我把 Claude Code 的开销砍掉 70% 的完整配置
ai编程·claude
sickworm陈浩4 小时前
为 300W 行的安卓老工程落地可迭代的 AI 知识库
android·ai编程
Java老刘4 小时前
Spring AI + Chroma 如何搭建汽车客服知识库问答系统
spring boot·ai编程
木子予彤4 小时前
Android 性能诊断 V2：基于 Agent Skill 的原生 IDE 融合架构
android·ai编程
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）07UV安装并设置国内源08Oh My Codex 快速使用指南09Claude Code 未登录 使用第三方模型10【Vulhub】Fastjson 1.2.24_rce复现