前言
这段时间在把工作上的任务完成之后，趁着摸鱼时间又学了几个简单的 JS 效果。之前接触比较多的都是 CSS 特效，这次带来一个 JS 实现的特效——刮刮乐。
效果预览
其实本质上来讲这个效果就是通过添加一个事件监听器，在鼠标移动时创建一个背景被擦掉的效果，类似于橡皮擦效果或者刮刮乐效果。
JS部分
既然这主要是通过 JS 来实现刮刮乐刮奖效果，那我们首先来看 JS 部分的代码。
<script>
document.addEventListener('mousemove',function(e){
const body = document.querySelector('body')
const bubbles = document.createElement('span')
bubbles.style.left = e.offsetX + 'px'
bubbles.style.top = e.offsetY + 'px'
body.appendChild(bubbles)
})
</script>
首先，使用 document.addEventListener() 方法添加了一个鼠标移动事件监听器。这意味着当鼠标移动时，将执行传递的回调函数。在回调函数中，再通过 document.querySelector() 方法选中整个文档中的 body 元素，并将其赋值给变量 body。
然后，我们再创建了一个 span 元素，这里的 span 元素是通过 createElement 方法新创建出来的，在没创建前是页面中不存在的，并将其赋值给变量 bubbles。这个 span 元素可以被看作成刮奖后的效果展示。
接下来，开始设置 span 元素的位置。通过 e.offsetX 和 e.offsetY 属性获取鼠标相对于事件目标的水平和垂直偏移量，并将其分别赋值给 span 的 left 和 top 样式属性。这将使气泡随着鼠标的移动而在文档中的不同位置显示。
最后，我们再通过 appendChild() 方法将 span 元素添加到 body 元素中，让它显示出来。因此，最终的效果就是当鼠标移动时，就可以从视觉上达到刮奖的效果。
CSS部分
看完了 JS 代码，接下来就是少量的 CSS 代码。这一部分主要是实现网格背景以及 span 元素的样式。
body{
......
background: repeating-linear-gradient(0deg,#fff 0%,#fff 50%,#000,50%,#000 100%),
repeating-linear-gradient(90deg,#fff 0%,#fff 50%,#000,50%,#000 100%);
background-size: 30px 30px;
background-blend-mode: difference;
overflow: hidden;
}
span{
display: block;
position: absolute;
width: 150px;
height: 150px;
background: #000;
pointer-events: none;
border-radius: 50%;
background-attachment: fixed;
}
首先，我们来创建一个全屏的网格背景效果。使用两个重复线性渐变背景来创建一个方格纹理的效果，一个是水平方向的，一个是垂直方向的。渐变的颜色由白色到黑色交替，每个方格的大小为30px x 30px。接下来，再使用 background-blend-mode 属性将两个渐变背景进行差值混合，使得颜色更加鲜明。这样就可以实现我们看到的网格背景效果了。
接着，我们再来为 span 元素赋予样式。我们设置其为块级元素，并使用绝对定位使其脱离文档流。然后把宽度和高度设置为150px，背景颜色为黑色。为了不响应鼠标事件，把 pointer-events 属性设置为 none 即可。接下来就是把 span 元素的边框设置为圆形。最后，background-attachment 属性设置为 fixed，使得背景相对于视口固定，不随滚动而移动。
总结
以上就是整个 JS 刮奖效果的实现过程了，代码简单明了，通俗易懂，如果给刮奖加上背景图，就可以丰富整个效果的呈现了，大家可以去码上掘金里查看完整代码，感兴趣的同学可以去试试。
