一览无余的霓虹灯绘画板：用 HTML、CSS 和 JavaScript 点亮您的创意

在短短 3 分钟内打造一个令人惊叹的霓虹灯绘画板

互联网已经成为一个创意表达的宝库，而交互式网页设计在其中扮演着越来越重要的角色。其中一个引人注目的趋势是霓虹灯绘画板，它允许用户在数字画布上使用五颜六色的霓虹灯笔进行创作。在这个教程中，我们将深入探讨如何使用 HTML、CSS 和 JavaScript 构建一个这样的绘画板。

第 1 步：构建画布

我们的霓虹灯绘画板将由一个主容器 div（.main）组成，里面嵌套一个用于显示文本和绘制霓虹灯效果的 div（.txt）。

<div class="main">
  <div class="txt"></div>
</div>

第 2 步：动态创建霓虹灯效果

为了创建霓虹灯效果，我们将使用 JavaScript 动态添加大量小圆圈 div（.dot）。每个圆圈都将定位在鼠标指针周围，并应用颜色渐变以模拟霓虹灯发光。

function createDot(x, y) {
  const dot = document.createElement("div");
  dot.classList.add("dot");
  dot.style.left = `${x}px`;
  dot.style.top = `${y}px`;
  document.querySelector(".txt").appendChild(dot);
}

第 3 步：追踪鼠标移动

我们需要跟踪鼠标在画布上的移动，以便在指针移动时动态创建圆圈。

document.addEventListener("mousemove", (e) => {
  createDot(e.clientX, e.clientY);
});

第 4 步：为霓虹灯效果增添趣味

为了让绘画板更具趣味性，我们可以使用 CSS 动画和变换来为圆圈添加移动和旋转效果。

.dot {
  animation: neon 1s infinite alternate;
  transform: translate(-50%, -50%) rotate(45deg);
}

@keyframes neon {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

第 5 步：添加颜色和自定义选项

我们可以通过 CSS 变量让用户自定义绘画板的外观，允许他们选择不同的颜色和效果。

:root {
  --neon-color: #ff0000;
}

.dot {
  background: var(--neon-color);
}

结论

恭喜您！您已经成功构建了一个令人惊叹的霓虹灯绘画板。通过结合 HTML、CSS 和 JavaScript 的强大功能，我们创建了一个交互式画布，让您的创意得以尽情发挥。