巧用CSS与JavaScript, 打造酷炫年份数字拼图效果

2024-01-20 07:25:54

把数字搞碎

构建数字模板

首先，我们需要一个数字模板，它将作为拼图块的基础。我们可以使用HTML和CSS创建一个简单的数字，如：

<div class="digit">
  <span>2</span>
</div>

.digit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background: #fff;
  border: 1px solid #000;
  font-size: 36px;
}

创建数字块

有了数字模板，我们可以将其复制并创建多个数字块。每个数字块将代表拼图中的一个碎片。我们可以通过JavaScript实现这个过程：

const digit = document.querySelector('.digit');
const numBlocks = 10; // 碎片数量

for (let i = 0; i < numBlocks; i++) {
  const block = digit.cloneNode(true);
  block.classList.add('block');
  block.style.position = 'absolute';
  block.style.left = `${Math.random() * 100}%`;
  block.style.top = `${Math.random() * 100}%`;
  document.body.appendChild(block);
}

这段代码会创建10个数字块，并将它们随机放置在页面上。

隐藏数字块

为了让拼图效果更逼真，我们需要隐藏数字块，直到用户点击或鼠标悬停在它们上面。我们可以通过CSS来实现：
```
.block {
  opacity: 0;
  transition: opacity 0.5s ease;
}
```

让数字块飞起来

添加交互

当用户点击或鼠标悬停在数字块上时，我们需要让它飞回正确的数字位置。我们可以通过JavaScript来实现：

const blocks = document.querySelectorAll('.block');

blocks.forEach((block) => {
  block.addEventListener('click', () => {
    block.style.opacity = 1;
    block.style.left = `${block.dataset.left}%`;
    block.style.top = `${block.dataset.top}%`;
  });

  block.addEventListener('mouseover', () => {
    block.style.opacity = 0.5;
  });

  block.addEventListener('mouseout', () => {
    block.style.opacity = 0;
  });
});

这段代码会给每个数字块添加点击和鼠标悬停事件监听器。当用户点击或鼠标悬停在数字块上时，它将飞回正确的数字位置并显示出来。

增加视觉效果

添加动画

为了让拼图效果更具视觉冲击力，我们可以给数字块添加动画。我们可以使用CSS3的动画来实现：
```
.block {
  animation: pop 0.5s ease-in-out infinite;
}

@keyframes pop {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
```
这段代码会给每个数字块添加一个名为“pop”的动画。这个动画会让数字块不断地缩放，从而产生一种视觉效果。

把数字拼起来

完成拼图

当所有数字块都飞回正确的位置并显示出来后，拼图就完成了。我们可以通过CSS来让数字块组合成一个完整的数字：
```
.digit {
  position: relative;
}

.block {
  position: absolute;
  left: 0;
  top: 0;
}
```
这段代码会让数字块定位在数字元素内，并组合成一个完整的数字。