使用html5写一个刮刮乐奖券的布局

打野赵怀真2024-11-20 10:38

"```markdown

使用HTML5创建刮刮乐奖券布局

1. 基本结构

首先，创建一个基本的HTML结构，包括<!DOCTYPE html>声明和<html>，<head>，<body>标签。

html 复制代码 
<!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 rel=\"stylesheet\" href=\"styles.css\">
</head>
<body>
    <div class=\"scratch-card\">
        <div class=\"reward\">
            <h2>恭喜你!</h2>
            <p>你赢得了</p>
            <h1>100元现金!</h1>
        </div>
        <div class=\"scratch-area\"></div>
    </div>
    <script src=\"script.js\"></script>
</body>
</html>

2. CSS样式

接下来，使用CSS来设计刮刮乐的外观。设置奖券的尺寸、背景颜色、边框和其他样式。

css 复制代码 
/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.scratch-card {
    width: 300px;
    height: 400px;
    border: 2px solid #d5d5d5;
    border-radius: 10px;
    background: linear-gradient(135deg, #f9d423, #ff4e50);
    position: relative;
    overflow: hidden;
}

.reward {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.scratch-area {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

3. 刮刮乐功能

使用JavaScript来实现刮刮乐的刮除效果。监听鼠标事件并在划过的地方显示透明区域。

javascript 复制代码 
// script.js
const scratchArea = document.querySelector('.scratch-area');

scratchArea.addEventListener('mousemove', (e) => {
    if (e.buttons !== 1) return; // 仅在按下鼠标时触发
    const x = e.offsetX;
    const y = e.offsetY;

    const circle = document.createElement('div');
    circle.style.width = '20px';
    circle.style.height = '20px';
    circle.style.borderRadius = '50%';
    circle.style.position = 'absolute';
    circle.style.left = `${x - 10}px`;
    circle.style.top = `${y - 10}px`;
    circle.style.backgroundColor = 'rgba(255, 255, 255, 0)'; //透明区域

    scratchArea.appendChild(circle);
});

// 添加清除功能
scratchArea.addEventListener('mouseleave', () => {
    scratchArea.style.pointerEvents = 'none'; // 禁用鼠标事件
});

4. 整体效果

上述代码将创建一个简单的刮刮乐奖券布局。用户可以使用鼠标在刮刮乐区域上"刮"出隐藏的信息，展现出奖品内容。

通过这种方式，我们可以轻松地创建一个交互式的刮刮乐奖券，结合HTML5、CSS和JavaScript技术，提供一个有趣的用户体验。

" 复制代码
相关推荐
初遇你时动了情25 分钟前
uniapp 城市选择插件
开发语言·javascript·uni-app
zhangjr05751 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱1 小时前
【操作系统不挂科】＜CPU调度（13）＞选择题（带答案与解析）
java·linux·前端·算法·操作系统
zongzi_4941 小时前
二次封装的天气时间日历选择组件
开发语言·javascript·ecmascript
木子七1 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼2 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态2 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚2 小时前
【Web前端】实现基于 Promise 的 API：alarm API
开发语言·前端·javascript·api·promise
WilliamLuo2 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发
Beekeeper&&P...2 小时前
web钩子什么意思
前端·网络
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06RAG 实践- Ollama+RagFlow 部署本地知识库0704 - matlab m_map地学绘图工具基础函数 - 设置网格08Unity中PICO实现 隔空取物 和 接触抓取物体09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10【目标跟踪】相机运动补偿