使用deepseek在线抽奖网页前端设计指南

要连接真实API可修改startLottery方法中的请求逻辑。icons8的PNG图片（可替换为其他开源图片）可替换prizes数组中的奖品信息和图片链接。使用Animate.css添加动画效果。模拟API请求（可替换为真实API）Bootstrap 5 (样式框架)建议在服务器环境下运行以获得最佳体验。Animate.css (动画库)图片使用开源资源，商用需注意授权。Vue.js 3 (前端

知识薯条

250人浏览 · 2025-04-01 17:48:38

知识薯条 · 2025-04-01 17:48:38 发布

一个简单美观的在线抽奖活动网页前端代码，使用Vue.js框架和开源资源实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸运大抽奖</title>
    <!-- 引入第三方库 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }

        .prize-wheel {
            background: url('https://img.icons8.com/clouds/500/000000/prize.png') no-repeat center;
            background-size: contain;
            width: 300px;
            height: 300px;
            transition: transform 3s cubic-bezier(0.25, 0.1, 0.25, 1);
            margin: 2rem auto;
        }

        .btn-lucky {
            padding: 1.5rem 3rem;
            font-size: 1.5rem;
            border-radius: 50px;
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            border: none;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
            transition: all 0.3s ease;
        }

        .btn-lucky:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
        }

        .result-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 2rem;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div id="app" class="container text-center py-5">
        <h1 class="display-4 mb-4 animate__animated animate__bounce">幸运大抽奖</h1>
        
        <div class="prize-wheel" :style="{transform: wheelRotation}"></div>
        
        <button 
            class="btn-lucky text-white mb-4" 
            @click="startLottery"
            :disabled="isDrawing"
        >
            {{ isDrawing ? '抽奖中...' : '立即抽奖' }}
        </button>

        <div v-if="showResult" class="result-card animate__animated animate__zoomIn">
            <h3 class="text-success">🎉 恭喜您获得！</h3>
            <img :src="result.image" alt="奖品" class="img-fluid my-3" style="max-height: 150px">
            <h4>{{ result.name }}</h4>
            <button class="btn btn-primary mt-3" @click="showResult = false">确认领取</button>
        </div>

        <div class="row justify-content-center">
            <div class="col-md-8">
                <h4 class="mb-3">奖品展示</h4>
                <div class="row">
                    <div v-for="(prize, index) in prizes" :key="index" class="col-4 mb-3">
                        <div class="card h-100">
                            <img :src="prize.image" class="card-img-top" alt="奖品图片">
                            <div class="card-body">
                                <h5 class="card-title">{{ prize.name }}</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Vue和第三方库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.min.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    isDrawing: false,
                    showResult: false,
                    wheelRotation: 'rotate(0deg)',
                    result: {},
                    prizes: [
                        {
                            name: '一等奖：最新手机',
                            image: 'https://img.icons8.com/clouds/200/000000/smartphone.png'
                        },
                        {
                            name: '二等奖：蓝牙耳机',
                            image: 'https://img.icons8.com/clouds/200/000000/headphones.png'
                        },
                        {
                            name: '三等奖：优惠券',
                            image: 'https://img.icons8.com/clouds/200/000000/discount.png'
                        }
                    ]
                }
            },
            methods: {
                async startLottery() {
                    if(this.isDrawing) return;
                    this.isDrawing = true;
                    
                    // 模拟API请求
                    const resultIndex = Math.floor(Math.random() * this.prizes.length);
                    await new Promise(resolve => setTimeout(resolve, 3000));
                    
                    this.result = this.prizes[resultIndex];
                    this.wheelRotation = `rotate(${1440 + resultIndex * 120}deg)`;
                    this.showResult = true;
                    this.isDrawing = false;
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

这个抽奖网页包含以下特点和功能：