刮刮乐：CSS特效营造趣味交互体验

前端

2023-10-28 11:07:23

CSS特效的艺术

CSS，层叠样式表，已不再仅仅是网页美化的工具。得益于CSS3的强劲功能，如今，我们能够为网页赋予各种炫目的特效，增强用户体验。

其中，刮刮乐效果以其趣味性和交互性脱颖而出。想象一下，当鼠标划过页面元素时，就像刮开彩票一样，露出隐藏的内容。这种效果在各种场景下都极具吸引力，从互动式游戏到产品展示。

刮刮乐效果的实现

实现刮刮乐效果需要CSS3和JavaScript的协作。CSS3负责创建刮刮层的视觉效果，而JavaScript则监听鼠标事件并控制动画。

CSS3：刮刮层

首先，我们需要创建一个刮刮层。这可以通过使用伪元素:before实现：

.刮刮层 {
  position: relative;
  width: 200px;
  height: 200px;
}

.刮刮层:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ccc;
}

此代码创建了一个200px x 200px的灰色矩形，充当刮刮层。

JavaScript：鼠标事件监听

接下来，我们需要使用JavaScript监听鼠标事件。当鼠标划过刮刮层时，我们希望触发动画，刮掉灰色区域，露出隐藏的内容。

const 刮刮层 = document.querySelector('.刮刮层');

刮刮层.addEventListener('mousemove', function(e) {
  const x = e.clientX - 刮刮层.offsetLeft;
  const y = e.clientY - 刮刮层.offsetTop;

  const 新元素 = document.createElement('div');
  新元素.style.position = 'absolute';
  新元素.style.top = y + 'px';
  新元素.style.left = x + 'px';
  新元素.style.width = '20px';
  新元素.style.height = '20px';
  新元素.style.background = 'transparent';

  刮刮层.appendChild(新元素);
});

此代码会在刮刮层上添加一个新元素，坐标对应鼠标位置。新元素的背景设置为透明，因此它会将灰色区域“擦除”，露出刮刮层下的内容。

CSS3：动画效果

最后，我们需要添加一个CSS3动画，使新元素从中心向外扩散，营造刮刮乐效果：

.新元素 {
  animation: 刮刮 0.5s linear forwards;
}

@keyframes 刮刮 {
  0% {
    width: 0;
    height: 0;
  }

  100% {
    width: 40px;
    height: 40px;
  }
}