用CSS实现轻便又讨喜的画笔效果

2023-09-05 07:56:12

使用 CSS 创建迷人的画笔动画效果

在当今快节奏的数字世界中，网站和应用程序不仅需要提供信息，还需要为用户提供引人入胜的体验。动画就是实现这一目标的强大工具，它可以增添趣味性、吸引力和互动性。本文将深入探讨如何使用 CSS 创建一个简单但引人注目的画笔动画效果，让你的网站或应用程序脱颖而出。

创建画布

首先，我们需要一个画布，让画笔在上面绘画。为此，我们可以使用一个 div 元素，并设置它的尺寸和背景颜色：

<div id="canvas" style="width: 500px; height: 500px; background-color: #ffffff;"></div>

创建画笔

接下来，是创建画笔本身。我们使用一个 span 元素，并通过 CSS 将其样式化为画笔形状：

<span id="brush" style="width: 10px; height: 10px; border-radius: 50%; background-color: #000000;"></span>

动画画笔

现在，我们可以使用 CSS 的 animation 和 transition 属性让画笔在画布上移动。animation 属性创建画笔在画布上绘制一条线的动画，而 transition 属性让画笔平滑地移动到画布的不同位置。

#brush {
  animation: draw 1s linear infinite;
  transition: transform 0.2s ease-in-out;
}

@keyframes draw {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(500px, 500px);
  }
}

交互性

为了让动画更有互动性，我们可以使用 JavaScript 响应用户的鼠标移动。当用户将鼠标悬停在画布上时，画笔会移动到鼠标位置并开始动画。

const canvas = document.getElementById("canvas");
const brush = document.getElementById("brush");

canvas.addEventListener("mousemove", (event) => {
  brush.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
  brush.classList.add("active");
});

canvas.addEventListener("mouseleave", () => {
  brush.classList.remove("active");
});