"```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技术,提供一个有趣的用户体验。
相关推荐
轻口味1 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kitalikami1 小时前
【若依】用 post 请求传 json 格式的数据下载文件wakangda2 小时前
React Native 集成原生Android功能吃杠碰小鸡2 小时前
lodash常用函数emoji1111112 小时前
前端对页面数据进行缓存泰伦闲鱼2 小时前
nestjs:GET REQUEST 缓存问题m0_748250032 小时前
Web 第一次作业 初探html 使用VSCode工具开发一个处女座的程序猿O(∩_∩)O2 小时前
vue3 如何使用 mountedm0_748235952 小时前
web复习(三)User_undefined2 小时前
uniapp Native.js原生arr插件服务发送广播到uniapp页面中热门推荐
01【一文读懂】NTN(非地面网络)技术介绍02优化手机性能,解决卡顿问题:关闭这3个微信开关,释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio:开源大模型全链路一站式中台05基于大语言模型(LLM)的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现(Stata 或 R)08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库