实现一个类似刮刮卡效果的交互，可以使用HTML、CSS和JavaScript来完成。以下是一个简单的示例，展示如何在鼠标划过时显示隐藏的号码。
HTML
首先，创建一个HTML文件，其中包含刮刮卡区域和一些隐藏的数字。
<!DOCTYPE html>
<html lang="en">
<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="scratch-area">
<div class="number" data-number="123">###</div>
<div class="number" data-number="456">###</div>
<div class="number" data-number="789">###</div>
<!-- 你可以添加更多的数字 -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
接下来，添加一些CSS样式来隐藏号码并设置刮刮卡区域的外观。
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.scratch-card {
width: 300px;
height: 150px;
border: 2px solid #000;
border-radius: 10px;
overflow: hidden;
position: relative;
background-color: #fff;
}
.scratch-area {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
box-sizing: border-box;
}
.number {
width: 80px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ddd;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
user-select: none;
position: relative;
}
.number::before {
content: '###';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
opacity: 1;
transition: opacity 0.3s ease;
}
.number.revealed::before {
opacity: 0;
pointer-events: none;
}
JavaScript
最后，添加JavaScript代码来处理鼠标划过事件，并显示隐藏的号码。
// script.js
document.addEventListener('DOMContentLoaded', () => {
const numbers = document.querySelectorAll('.number');
numbers.forEach(number => {
number.addEventListener('mouseenter', () => {
const realNumber = number.getAttribute('data-number');
number.textContent = realNumber;
number.classList.add('revealed');
});
// 如果需要鼠标移开时重新隐藏（可选）
// number.addEventListener('mouseleave', () => {
// number.textContent = '###';
// number.classList.remove('revealed');
// });
});
});
解释
-
HTML：
- 创建一个包含刮刮卡区域的容器
.scratch-card。 - 在刮刮卡区域内添加多个
.number元素，每个元素都有一个data-number属性来存储真实的号码。
- 创建一个包含刮刮卡区域的容器
-
CSS：
- 设置
.scratch-card的外观，包括大小、边框和圆角。 - 使用
.number::before伪元素来显示默认的###，并设置过渡效果。 - 当
.number元素被添加revealed类时，隐藏伪元素以显示真实的号码。
- 设置
-
JavaScript：
- 监听每个
.number元素的mouseenter事件。 - 当鼠标进入
.number元素时，获取data-number属性并更新元素的文本内容，同时添加revealed类以触发 CSS 中的过渡效果。
- 监听每个
这样，当你将鼠标划过刮刮卡上的数字时，它们就会显示出来。你可以根据需要调整样式和功能。
标签：flex,center,number,刮刮卡,划过,###,鼠标 From： https://www.cnblogs.com/ai888/p/18607656