CSS3实现简易版的刮刮乐效果

下面是CSS3实现简易版的刮刮乐效果的完整攻略：

1. 确定HTML结构

首先，我们需要确定HTML的结构，一般来说一个简单的刮刮乐效果可以采用以下HTML结构：

<div class="scratch-card">
    <img src="image/bg.jpg" alt="背景图">
    <div class="mask"></div>
</div>

其中，.scratch-card 是刮刮乐的容器，.mask 是遮罩层，遮盖在背景图上，实现刮刮乐的效果。

2. 遮罩层实现

为了实现刮刮乐效果，我们需要在mask元素上添加CSS样式，让其作为背景图的遮罩层。

.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(image/mask.png) no-repeat center center;
    background-size: cover;
    opacity: 0.6;
    mix-blend-mode: destination-out;
}

上述CSS样式中，我们设置了：

position: absolute; 让遮罩层脱离文档流，以便正确覆盖背景图。
top: 0; left: 0; 让遮罩层从顶部和左侧开始覆盖背景图。
width: 100%; height: 100%; 让遮罩层的宽度和高度与容器相等，达到遮罩效果。
background: url(image/mask.png) no-repeat center center; 设置遮罩层背景图，遮罩层会根据图像的大小对其进行缩放和平移，保持其水平和垂直中心对齐。
background-size: cover; 让背景图占满整个元素。
opacity: 0.6; 设置透明度，以便用户可以看到背景图上面的内容。
mix-blend-mode: destination-out; 将遮罩层的混合模式设置为目标生成，这样当我们在遮罩层上刮开的时候，背景图就会显示出来。

3. JS实现刮开效果

为了实现刮开效果，我们需要在遮罩层上添加mousedown, mousemove和 mouseup事件，记录鼠标坐标的变化并通过JS修改遮罩层的CSS属性来实现刮开背景图。

var scratchCard = document.querySelector('.scratch-card');
var mask = scratchCard.querySelector('.mask');
var isMouseDown = false;
var startX = 0;
var startY = 0;

mask.addEventListener('mousedown', function (e) {
    isMouseDown = true;
    startX = e.clientX - mask.offsetLeft;
    startY = e.clientY - mask.offsetTop;
});

mask.addEventListener('mousemove', function (e) {
    if (!isMouseDown) return;
    var x = e.clientX - mask.offsetLeft;
    var y = e.clientY - mask.offsetTop;
    var radius = 20;
    var startAngle = 0;
    var endAngle = Math.PI * 2;
    var dx = x - startX;
    var dy = y - startY;

    var ctx = mask.getContext('2d');
    ctx.beginPath();
    ctx.arc(x, y, radius, startAngle, endAngle);
    ctx.fillStyle = '#fff';
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fill();

    startX = x;
    startY = y;
});

mask.addEventListener('mouseup', function () {
    isMouseDown = false;
});

在上述的JS示例中，我们添加了mousedown, mousemove和mouseup事件的监听器。mousedown事件在用户点击鼠标时触发，mousemove事件在用户移动鼠标时触发，mouseup事件在用户释放鼠标时触发。

在mousedown事件中，我们记录下鼠标的坐标，并将isMouseDown标记为true以表示用户正在刮开遮罩层。

在mousemove事件中，我们检测isMouseDown是否为true，如果是，就计算出鼠标移动的距离，并利用canvas的API来绘制一个圆形的半透明的部分，实现刮开的效果。

在mouseup事件中，我们将isMouseDown标记为false，表示用户停止刮开遮罩层。

4. 示例

下面是两个示例，分别实现了矩形和圆形的刮刮乐效果。可以通过参考这些示例来进一步了解刮刮乐效果的实现。

矩形刮刮乐效果

<div class="scratch-card-rectangle">
    <img src="image/bg.jpg" alt="背景图">
    <div class="mask"></div>
</div>

.scratch-card-rectangle {
    position: relative;
    width: 400px;
    height: 300px;
}

.scratch-card-rectangle img {
    max-width: 100%;
    max-height: 100%;
}

.scratch-card-rectangle .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background-color: #ccc;
    mix-blend-mode: destination-out;
}

var scratchCardRectangle = document.querySelector('.scratch-card-rectangle');
var maskRectangle = scratchCardRectangle.querySelector('.mask');
var isMouseDownRectangle = false;
var startXRectangle = 0;
var startYRectangle = 0;

maskRectangle.addEventListener('mousedown', function (e) {
    isMouseDownRectangle = true;
    startXRectangle = e.clientX - maskRectangle.offsetLeft;
    startYRectangle = e.clientY - maskRectangle.offsetTop;
});

maskRectangle.addEventListener('mousemove', function (e) {
    if (!isMouseDownRectangle) return;
    var x = e.clientX - maskRectangle.offsetLeft;
    var y = e.clientY - maskRectangle.offsetTop;
    var dx = x - startXRectangle;
    var dy = y - startYRectangle;
    var ctx = maskRectangle.getContext('2d');
    ctx.beginPath();
    ctx.rect(x - 20, y - 20, 40, 40);
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fill();
    startXRectangle = x;
    startYRectangle = y;
});

maskRectangle.addEventListener('mouseup', function () {
    isMouseDownRectangle = false;
});

圆形刮刮乐效果

<div class="scratch-card-circle">
    <img src="image/bg.jpg" alt="背景图">
    <canvas class="mask"></canvas>
</div>

.scratch-card-circle {
    position: relative;
    width: 400px;
    height: 300px;
}

.scratch-card-circle img {
    max-width: 100%;
    max-height: 100%;
}

.scratch-card-circle .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background-color: #ccc;
    mix-blend-mode: destination-out;
}

var scratchCardCircle = document.querySelector('.scratch-card-circle');
var maskCircle = scratchCardCircle.querySelector('.mask');
var isMouseDownCircle = false;
var startXCircle = 0;
var startYCircle = 0;

maskCircle.width = scratchCardCircle.clientWidth;
maskCircle.height = scratchCardCircle.clientHeight;

maskCircle.addEventListener('mousedown', function (e) {
    isMouseDownCircle = true;
    startXCircle = e.clientX - maskCircle.offsetLeft;
    startYCircle = e.clientY - maskCircle.offsetTop;
});

maskCircle.addEventListener('mousemove', function (e) {
    if (!isMouseDownCircle) return;
    var x = e.clientX - maskCircle.offsetLeft;
    var y = e.clientY - maskCircle.offsetTop;
    var radius = 20;
    var startAngle = 0;
    var endAngle = Math.PI * 2;
    var dx = x - startXCircle;
    var dy = y - startYCircle;

    var ctx = maskCircle.getContext('2d');
    ctx.beginPath();
    ctx.arc(x, y, radius, startAngle, endAngle);
    ctx.fillStyle = '#fff';
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fill();

    startXCircle = x;
    startYCircle = y;
});

maskCircle.addEventListener('mouseup', function () {
    isMouseDownCircle = false;
});

上述代码示例可以直接复制到代码编辑器中运行，也可以下载完整的示例代码集，形成完整的打开html文件进行查看效果。

希望对你有所帮助，有任何疑问可以随时提出。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS3实现简易版的刮刮乐效果 - Python技术站