纯 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 classNameflex gap-8 p-4 bg-[#FAF7F0] border-2 border-[#2D2B2A] rounded-2xl shadow-[3px_4px_0px_#2D2B2A] select-none a href#today classNamebrush-hover-link text-sm今日微行动 /a a href#canvas classNamebrush-hover-link text-sm灵感画布 /a a href#moon classNamebrush-hover-link text-sm中秋夜读 /a /nav ); };极简动效的诗意当鼠标掠过文字一道充满生机的水彩笔迹像春笋破土般轻盈展开鼠标移开笔迹又温和收拢。用最轻盈的代码传递最细腻的交互美感让每一次悬停都成为一次与用户的温柔对话。