如何利用HTML/CSS/JavaScript实现黑白图片hover时转彩色效果？

下面提供三种实用方案，覆盖不同的动画风格和实现复杂度：

方案1：CSS分层+Clip-path 揭画式过渡 #

原理是将彩色图片作为底层，黑白图片放在上层作为遮罩，鼠标悬停时通过clip-path属性动态裁剪上层黑白图，逐步露出下方的彩色图，模拟揭画的效果。

HTML结构 #

<div class="image-container">
  <img src="color-image.jpg" alt="彩色图" class="color-img">
  <img src="bw-image.jpg" alt="黑白图" class="bw-img">
</div>

CSS样式 #

.image-container {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
}

.color-img, .bw-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bw-img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.2s ease-in-out;
}

.image-container:hover .bw-img {
  /* 从下往上揭画，完全露出彩色图 */
  clip-path: inset(100% 0 0 0);
}

修改clip-path参数可实现不同方向的揭画：比如从右往左用inset(0 0 0 100%)，对角裁剪用inset(100% 100% 0 0)。

方案2：CSS Filter+背景渐变填充式过渡 #

无需准备两张图片，用单张彩色图叠加黑白滤镜，通过背景渐变的位置移动实现类似填充的彩色过渡效果。

HTML结构 #

<div class="image-fill-container">
  <img src="color-image.jpg" alt="彩色图" class="fill-img">
</div>

CSS样式 #

.image-fill-container {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
}

.fill-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-fill-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: grayscale(100%);
  background-image: linear-gradient(to right, #000 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: left;
  transition: background-position 1s ease;
}

.image-fill-container:hover::before {
  background-position: right;
}

方案3：Canvas逐行渲染（精细动画控制） #

如果需要定制化的动画节奏（比如逐行、逐像素显示彩色），可以用Canvas结合JS实现精准控制。

HTML结构 #

<canvas id="color-reveal-canvas" width="400" height="300"></canvas>

JS代码 #

const canvas = document.getElementById('color-reveal-canvas');
const ctx = canvas.getContext('2d');

const colorImg = new Image();
const bwImg = new Image();
colorImg.src = 'color-image.jpg';
bwImg.src = 'bw-image.jpg';

// 初始绘制黑白图
bwImg.onload = () => {
  ctx.drawImage(bwImg, 0, 0, canvas.width, canvas.height);
};

let currentRow = 0;
let animationId;

canvas.addEventListener('mouseenter', () => {
  currentRow = 0;
  cancelAnimationFrame(animationId);
  animationId = requestAnimationFrame(revealColor);
});

canvas.addEventListener('mouseleave', () => {
  cancelAnimationFrame(animationId);
  ctx.drawImage(bwImg, 0, 0, canvas.width, canvas.height);
});

function revealColor() {
  if (currentRow < canvas.height) {
    ctx.drawImage(colorImg, 0, currentRow, canvas.width, 1, 0, currentRow, canvas.width, 1);
    currentRow += 2; // 调整步长控制动画速度
    animationId = requestAnimationFrame(revealColor);
  }
}

内容的提问来源于stack exchange，提问作者byNALa