纯 CSS 实现水彩笔触下划线悬停展开动效：宽度与平滑力道

在导航菜单栏、卡片标题或文字链接的交互中，普通的下划线悬停动效（Hover Underline）通常只是一根冷冰冰的实线从左向右平直伸展。

在追求温润手作手账美感的设计体系中，一个真正打动人心的悬停动效应该是：“当鼠标悬停在文字上方时，文字下方如同一支蘸着鼠尾草绿或琥珀金颜料的毛笔，从左向右以带有物理力道感与微弱波动的笔触优雅划过（Calligraphic Brush Hover Stroke）”。

借助纯 CSS 伪元素、transform-origin、三次贝塞尔弹性曲线与水彩噪点渐变，我们只需 20 行 CSS，就能实现一个 60fps 硬件加速的手绘笔触悬停划线组件。

+--------------------------------------------------------------------+ | 纯 CSS 水彩笔触悬停下划线物理力道模型 | +--------------------------------------------------------------------+ | 文字图层: 焦炭黑标题 (.brush-hover-link, position: relative) | | | | 悬停划线底层 (::after 伪元素): | | ├── 尺寸: height: 6px, bottom: -2px | | ├── 水彩渐变: linear-gradient(to right, #88AA99 15%, #F4D06F 90%) | | ├── 初始态: transform: scaleX(0), transform-origin: left bottom | | ├── 笔触微倾斜: transform: rotate(-0.5deg) | | | | 悬停激活态 (:hover::after): | | └── transform: scaleX(1) rotate(0deg) | | └── 驱动曲线: transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1)| +--------------------------------------------------------------------+

1. 核心手绘笔触悬停 CSS 实现

/* 水彩笔触悬停链接基础类 */ .brush-hover-link { position: relative; display: inline-block; color: #2D2B2A; font-weight: 700; text-decoration: none; cursor: pointer; padding-bottom: 2px; } /* 核心水彩毛刷下划线 (伪元素实现) */ .brush-hover-link::after { content: ""; position: absolute; left: 0; bottom: 0px; width: 100%; height: 5px; background: linear-gradient( 95deg, rgba(136, 170, 153, 0.9) 0%, rgba(168, 213, 186, 0.8) 50%, rgba(244, 208, 111, 0.95) 100% ); border-radius: 4px; /* 初始缩放为 0，锚点在左侧 */ transform: scaleX(0) rotate(-1deg); transform-origin: left center; transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1); pointer-events: none; z-index: -1; /* 垫在文字下方，不遮挡文字 */ } /* 悬停展开态：如毛笔自然行笔划过 */ .brush-hover-link:hover::after { transform: scaleX(1) rotate(0deg); }

2. 在 React 导航栏与卡片标题中的实装

import React from "react"; export const CozyNavHeader = () => { return ( <nav className="flex gap-8 p-4 bg-[#FAF7F0] border-2 border-[#2D2B2A] rounded-2xl shadow-[3px_4px_0px_#2D2B2A] select-none"> <a href="#today" className="brush-hover-link text-sm">今日微行动 🌿</a> <a href="#canvas" className="brush-hover-link text-sm">灵感画布 🎨</a> <a href="#moon" className="brush-hover-link text-sm">中秋夜读 🌕</a> </nav> ); };

极简动效的诗意

当鼠标掠过文字，一道充满生机的水彩笔迹像春笋破土般轻盈展开；鼠标移开，笔迹又温和收拢。

用最轻盈的代码传递最细腻的交互美感，让每一次悬停都成为一次与用户的温柔对话。