利用CSS与Canvas动画实现动态文本揭示效果-js教程-PHP中文网

利用CSS与Canvas动画实现动态文本揭示效果

花韻仙語

发布： 2025-09-23 10:19:51

原创

352人浏览过

利用CSS与Canvas动画实现动态文本揭示效果

本文探讨了如何在网页中通过巧妙结合CSS定位和Canvas动态绘图，实现一种独特的文本揭示效果。核心思想是利用Canvas绘制的动态图形作为背景，在白色背景上叠加同色隐藏文本，当Canvas绘制的黑色图案经过文本下方时，文本便会随之显现，营造出“鼠标划过即显”的视觉交互，而无需复杂的双重鼠标事件监听。

1. 概述：动态文本揭示的原理

在网页设计中，有时需要创建一些互动效果，例如当用户进行特定操作时，隐藏的元素能够显现。本教程将介绍一种利用html canvas元素和css定位技术，实现鼠标移动时动态揭示文本的方法。这种方法并非通过监听两个独立的鼠标事件，而是巧妙地利用了元素的层叠顺序和背景色的变化。

其核心原理是：将待揭示的文本元素设置为与背景色相同的颜色（例如，白色背景上的白色文本，使其初始不可见），然后将该文本元素通过CSS定位放置在Canvas元素的上方。当鼠标在Canvas上移动时，Canvas会动态绘制出与背景色形成对比的图形（例如，黑色“墨迹”）。由于文本在Canvas之上，这些黑色图形会作为文本的背景，从而使其显现出来。

2. 构建基础HTML结构

首先，我们需要一个包含Canvas元素和待揭示文本的HTML页面。文本将放置在一个独立的HTML元素（如<span>或<h2>）中，并通过CSS进行定位。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态文本揭示教程</title>
    <link rel="stylesheet" href="style.css"> <!-- 引入外部CSS文件 -->
</head>
<body>
    <!-- 页面顶部标题，保持黑色，与背景形成对比 -->
    <h1 style="color: black;">RENA</h1>

    <!-- 待揭示的文本，初始为白色，通过CSS定位在Canvas上方 -->
    <span id="revealed-text"><h2>总有更多值得发现</h2></span>

    <!-- Canvas元素，用于绘制动态的鼠标轨迹 -->
    <canvas id="my-canvas"></canvas>

    <script src="script.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>

登录后复制

在上述HTML结构中：

h1元素是一个普通的标题，颜色为黑色，与页面的白色背景形成对比。
span元素包裹了h2标签，其中包含我们想要揭示的文本。我们为其添加了id="revealed-text"以便于CSS选择器定位。
canvas元素是绘图区域，我们将在这里实现鼠标轨迹效果。

3. 应用CSS样式进行定位与隐藏

为了实现文本的初始隐藏和正确层叠，我们需要为文本元素和Canvas元素应用特定的CSS样式。

立即学习“前端免费学习笔记（深入）”；

body {
    margin: 0;
    overflow: hidden; /* 防止滚动条出现 */
    background-color: white; /* 确保背景色为白色 */
}

#my-canvas {
    position: absolute; /* 绝对定位，脱离文档流 */
    top: 0;
    left: 0;
    z-index: 1; /* 确保Canvas在文本下方 */
    background-color: transparent; /* Canvas本身透明，透出body背景 */
}

#revealed-text {
    color: white; /* 文本颜色与背景色相同，初始不可见 */
    z-index: 10; /* 确保文本在Canvas上方 */
    position: absolute; /* 绝对定位，脱离文档流 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 精确居中 */
    white-space: nowrap; /* 防止文本换行 */
}

/* 可以为h2标签添加一些字体样式 */
#revealed-text h2 {
    font-family: sans-serif;
    font-size: 2em;
    margin: 0; /* 移除默认外边距 */
}

登录后复制

关键CSS属性解释：

#my-canvas：设置为position: absolute并占据整个视口，z-index: 1确保它在默认文档流之上，但低于我们想要揭示的文本。
#revealed-text：
- color: white;：这是实现初始隐藏的关键。文本颜色与页面背景色（白色）相同，使其在没有黑色背景时不可见。
- z-index: 10;：将其设置一个高于Canvas的z-index值，确保文本始终显示在Canvas绘制的图形之上。
- position: absolute;结合top: 50%; left: 50%; transform: translate(-50%, -50%);可以使文本精确地居中显示。

4. 实现Canvas鼠标轨迹动画

接下来，我们将使用JavaScript在Canvas上绘制动态的鼠标轨迹效果。当鼠标移动时，会在Canvas上生成一系列黑色“墨滴”，这些墨滴将作为文本的动态背景。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");

// 初始化Canvas尺寸，使其铺满整个窗口
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 当窗口大小改变时，重新调整Canvas尺寸
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

let atoms = []; // 存储所有“墨滴”对象

// 鼠标移动事件监听器：在鼠标位置生成新的墨滴
canvas.addEventListener('mousemove', function(e){
    // 每次鼠标移动，生成20个墨滴，增加视觉密度
    for (let i = 0; i < 20; i++) {
        atoms.push(new Atom(e.x, e.y));    
    }
});

// 动画循环函数
const animate = () => {
    // 清除上一帧的Canvas内容，以便绘制新的墨滴
    // 这里我们不完全清除，而是绘制一个半透明的矩形，制造拖影效果
    ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'; // 半透明白色，逐渐淡化旧墨滴
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 设置墨滴的颜色为黑色
    ctx.fillStyle = 'black';

    atoms.forEach((atom, index) => {
        atom.draw();        // 绘制当前墨滴
        atom.updateSpeed(); // 更新墨滴位置
        atom.updateSize();  // 更新墨滴大小

        // 如果墨滴半径过小（几乎消失），则从数组中移除
        if (atom.radius < 0.3){
            atoms.splice(index, 1);
        }
    })
    requestAnimationFrame(animate); // 请求下一帧动画
} 

animate(); // 启动动画

// 墨滴（Atom）类定义
class Atom{
    constructor(x,y){
        this.x = x; // 墨滴初始X坐标
        this.y = y; // 墨滴初始Y坐标
        this.radius = Math.random() * 8 + 2; // 墨滴初始半径，随机大小
        this.speedX = Math.random() * 4 - 2; // 墨滴X轴移动速度，随机方向和大小
        this.speedY = Math.random() * 4 - 2; // 墨滴Y轴移动速度，随机方向和大小
    }

    // 更新墨滴位置
    updateSpeed(){
        this.x += this.speedX;
        this.y += this.speedY;
    }

    // 减小墨滴大小，使其逐渐消失
    updateSize(){
        this.radius -= 0.1;
    }

    // 绘制墨滴
    draw(){
        ctx.beginPath(); // 开始路径
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2); // 绘制圆形
        ctx.fill(); // 填充圆形
    }
}

登录后复制

JavaScript代码详解：

Canvas初始化：获取Canvas上下文并设置其尺寸以适应窗口。
atoms数组：用于存储所有活动的Atom对象，每个Atom代表一个墨滴。
mousemove事件：当鼠标在Canvas上移动时，会创建新的Atom实例并添加到atoms数组中。
animate函数：这是一个递归函数，使用requestAnimationFrame创建平滑动画。
- ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'; ctx.fillRect(...)：这行代码是关键，它不是完全清除Canvas，而是用一个半透明的白色矩形覆盖整个Canvas。这会逐渐淡化旧的墨滴，形成一种拖影效果，同时也能让新的黑色墨滴更加突出。如果想要更清晰的墨滴，可以改为ctx.clearRect(0, 0, canvas.width, canvas.height);。
- 遍历atoms数组，更新每个墨滴的状态并重新绘制。
- 当墨滴半径小于某个阈值时，将其从atoms数组中移除，以优化性能。
Atom类：定义了墨滴的属性（位置、大小、速度）和行为（更新位置、更新大小、绘制）。

5. 总结与注意事项

通过上述HTML、CSS和JavaScript的组合，我们成功实现了一个动态文本揭示效果。当鼠标在页面上移动时，Canvas上绘制的黑色“墨滴”会为上方的白色文本提供一个对比背景，使其显现。

核心要点回顾：

CSS z-index 和 position：这是实现元素层叠的关键。确保文本元素具有更高的z-index并使用position: absolute脱离文档流，以便可以精确控制其位置。
颜色匹配：初始时将文本颜色设置为与背景色相同，使其“隐形”。
Canvas动态绘制：利用Canvas的绘图能力，根据用户交互（如鼠标移动）动态生成与背景色对比的图形。
性能优化：在Canvas动画中，及时清理不再需要的对象（如本例中的Atom实例）对于保持动画流畅性至关重要。

这种技术不仅限于揭示文本，还可以应用于揭示图片、图标或其他HTML元素。通过调整Canvas绘制的图形类型、颜色、动画速度以及文本的样式和定位，可以创造出各种富有创意的互动效果。

注意事项：