博客 Logo 动画是怎么做的

Thu, 14 Aug 2025 17:00:00 +0000

网站左上角那个小方框, 是视频.

默认灰度, hover 才亮起来, 颜色每次还不一样, 播放速度也会先快后缓. 像被惊醒了一下.

为什么做这个

之前 logo 是张静态 PNG. 总觉得缺了点呼吸感. 正好手头有一段素材, 就把 logo 从静态图换成了视频.

mp4 没有 Alpha 通道

剪映导出时明明去掉了背景, 但 mp4 不支持透明通道, 透明部分被压成了黑色.

桌面端用 mix-blend-mode: screen 解决 — 黑色变完全透明, 只保留亮色部分:

@media (hover: hover) and (pointer: fine) {
 #header #logo { mix-blend-mode: screen; }
}

限定 (hover: hover) 是因为移动端浏览器对 <video> 的 blend mode 支持普遍不好.

移动端改用 <canvas> 做逐像素抠图: video 隐藏继续播放, canvas 每帧取画面, RGB 都低于 30 的像素 alpha 置 0:

function render() {
 canvasCtx.drawImage(videoEl, 0, 0, w, h);
 var src = canvasCtx.getImageData(0, 0, w, h).data;
 var id = canvasCtx.createImageData(w, h);
 for (var i = 0; i < src.length; i += 4) {
 id.data[i] = src[i];
 id.data[i+1] = src[i+1];
 id.data[i+2] = src[i+2];
 id.data[i+3] = (src[i] < 30 && src[i+1] < 30 && src[i+2] < 30) ? 0 : 255;
 }
 canvasCtx.putImageData(id, 0, 0);
 requestAnimationFrame(render);
}

这个性能取决于视频分辨率, logo 尺寸很小, 所以开销可以接受.

Logo on Time Friend

博客 Logo 动画是怎么做的

为什么做这个

mp4 没有 Alpha 通道