教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载链接的 hover 效果是网页交互中最细小却最能体现设计巧思的细节之一。本文将以 30-seconds-of-code 仓库中的 squiggle-link-hover-effect.md 为主体完整拆解一种极具顽皮感的波浪下划线squiggle underline实现方案把一段自带 CSS 动画的 SVG 路径经 data URI 编码后作为链接的background-image在 hover 时替换为一条永远流动的波浪线。读完本文你将掌握 SVG 内联编码、background-image多层切换、以及利用linear-gradient做静态下划线 → 动态波浪线平滑过渡的完整实战技巧并能在此基础上自由定制颜色、粗细、速度与流动方向。效果原理为什么用 SVG 背景图这个技巧的关键在于把SVG 图片用作链接的background-image。与直接用伪元素画一条线不同SVG 的优势在于波浪路径本身就在 SVG 内部定义几何形状完全可控SVG 内部可以携带style块和keyframes动画逻辑与页面 CSS 解耦背景图自己就会动配合background-repeat: repeat-x单段路径会横向无缝平铺形成一条横贯整个链接宽度的波浪线。动画本身非常简单对路径做一次沿 x 轴的平移让每个平铺单元里的波浪持续左移视觉上便产生了波浪在流动的错觉。整个过程只需要 CSS零 JavaScript。原始 SVG一条会流动的波浪路径先看未编码的 SVG 源文本它定义在一个20 x 4的坐标系中svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 20 4 style typetext/css .squiggle { animation: shift .3s linear infinite; } keyframes shift { from { transform: translateX(0); } to { transform: translateX(-15px); } } /style path fillnone stroke#0087ca stroke-width2 classsquiggle dM0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3 / /svg拆解几个关键设计viewBox0 0 20 4坐标系宽 20 个单位、高 4 个单位。4px 的高度直接决定了后续 CSS 中background-size: auto 4px的取值也保证波浪线恰好贴合文字底部。animation: shift .3s linear infinite每 0.3 秒循环一次linear缓动保证匀速、无顿挫infinite让流动永不停止。keyframes shift路径从translateX(0)移动到translateX(-15px)。注意这里只平移 15px 而不是 20px——路径的水平周期是 20px位移 15px 会让相邻两个平铺单元的相位错开形成连续流动的错觉如果改成恰好 20px每个单元会无缝复制而看不出流动。d路径数据以M0,3.5起笔用贝塞尔曲线命令c三次贝塞尔与s平滑延伸交替勾勒出两段波峰波谷。c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3表示在 20px 的宽度内画出两个对称起伏恰好构成一个可重复的波浪周期。stroke#0087ca与stroke-width2蓝色描边、粗细 2pxfillnone表示只画线不填充避免出现实心块。将 SVG 编码进 CSSdata URI 的完整转换由于 CSS 的url()不接受换行与未转义的特殊字符必须把上面的 SVG 压缩成一行并做URL 编码得到data:image/svgxml;charsetutf8,...的形式a.squiggle:hover { background-image: url(data:image/svgxml;charsetutf8,%3Csvg xmlnshttp://www.w3.org/2000/svg viewBox0 0 20 4%3E%3Cstyle typetext/css%3E.squiggle{animation:shift .3s linear infinite;}keyframes shift {from {transform:translateX(0);}to {transform:translateX(-15px);}}%3C/style%3E%3Cpath fillnone stroke%230087ca stroke-width2 classsquiggle dM0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3/%3E%3C/svg%3E); background-size: auto 4px; }编码规则很直白可以与上面的源文本一一对应→%3C→%3E十六进制颜色里的#→%23如stroke%230087ca否则会被当作 URL 的锚点分隔符解析内部所有属性仍用单引号包裹属性值避免与 CSS 外层url(...)的双引号冲突charsetutf8声明编码压缩掉换行与多余空白以减小体积。这份编码后的版本就是原文档中 hover 状态使用的完整 background 数据直接复制即可运行。组装到链接上HTML 与静态下划线接下来需要一段 HTML 让效果落地pThe a classsquiggle href#magnificent octopus/a swam along gracefully./p对应的基础样式如下a.squiggle { background-image: linear-gradient(to bottom, #0087ca 0%, #0087ca 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 2px 2px; color: inherit; text-decoration: none; }这里做了三件事text-decoration: none移除浏览器默认的原生下划线color: inherit让链接文字继承周围文本颜色不额外强调用一个linear-gradient(to bottom, #0087ca 0%, #0087ca 100%)作为背景图——它本身是一段从蓝到蓝的纯色渐变配合background-repeat: repeat-x与background-size: 2px 2px就变成了一条2px 高的静态蓝色下划线。而background-position: 0 100%的作用是把这条下划线定位到链接内容的底部与普通文字下划线位置一致。这一整套渐变假下划线的写法正是为 hover 时无缝切换到 SVG 波浪线做的铺垫。hover 状态SVG 替换渐变波浪开始流动当鼠标悬停时规则切换为a.squiggle:hover { background-image: url(data:image/svgxml;charsetutf8,...); /* 完整编码见上文 */ background-size: auto 4px; }关键点在于background-image由linear-gradient整体替换为 data URI 编码的 SVG两者不可能同时显示因此过渡是瞬间且干净的background-size: auto 4px让背景保持 SVG 原始坐标系的高度4px宽度按比例自动缩放background-repeat: repeat-x、background-position等属性继承自基础规则不需要在 hover 中重复声明SVG 单元因此沿水平方向无缝平铺每个平铺的 SVG 单元内部.squiggle路径持续执行translateX(-15px)的位移动画于是整条下划线看起来就像水流一样持续向右/向左滚动。整个过程只有一张背景图的属性级替换没有任何 DOM 操作、伪元素或 JavaScript性能开销极小非常适合作为全站链接的统一交互细节。参数速查与自定义方向把核心参数整理成速查表方便按需调优参数示例值作用与调整建议stroke#0087ca波浪线颜色与静态下划线linear-gradient中的颜色保持一致否则 hover 切换时会有色差stroke-width2波浪线粗细调大需同步考虑viewBox高度与background-sizeviewBox0 0 20 4坐标系尺寸高度 4 直接对应background-size: auto 4pxanimation: shift .3s linear infinite.3s流动速度数值越小越快linear保证匀速translateX(-15px)-15px单次位移量与 20px 周期配合产生相位流动感background-size: 2px 2px静态—非 hover 时下划线的高度与重复单元尺寸background-size: auto 4pxhover—hover 时 SVG 的显示尺寸宽度自适应反向流动把keyframes shift中的位移改为translateX(15px)正值波浪便会朝相反方向流动。更大更粗的波浪同时提高viewBox高度如0 0 20 6、stroke-width与 hover 的background-size如auto 6px并相应增加translateX的位移量即可得到更夸张的波浪形态。修改后记得同时更新静态下划线的background-size高度让两种状态仍然衔接自然。仓库中的位置与姊妹效果该技巧位于仓库的 content/snippets/css/s/squiggle-link-hover-effect.md归属于 CSS 的 Hover Effects 集合见 content/collections/css/hover-effects.yaml并带有animation、visual两个标签同属于 content/collections/css/visual.yaml 描述的视觉类文章体系。同集合中有多个风格互补的下划线/悬停方案可供对比学习hover-underline-animation.md使用::after伪元素配合transform: scaleX(0/1)与transform-origin实现下划线从左侧生长到右侧的单次动画——它是一次性的而波浪线是无限流动的button-hover-transitions.md涵盖放大、缩小、填充、摆动、边框等五种按钮过渡适合批量理解transition与keyframes的用法mouse-cursor-gradient-tracking.md用 CSS 变量加少量 JavaScript 实现渐变跟随鼠标展示了 hover 交互的另一种进阶形态。需要说明的是data URI 内嵌 SVG 的写法依赖现代浏览器对 SVG 背景图与内部 CSS 动画的支持此外链接是行内元素若希望波浪线严格按照内容盒尺寸铺满可考虑配合display: inline-block使用。克隆仓库后在content/snippets/css/s/目录下可以浏览全部 78 篇 CSS 文章将这些 hover 技巧组合使用足以构建一套完整且富有细节的站点交互体系。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 Seconds of CodeCSS 悬停下划线生长动画Hover Underline Animation从原理到实战30 Seconds of CodeCSS 悬停下划线生长动画Hover Underline Animation从原理到实战 本指南以 30 Second教程文档30-seconds-of-code 实战五种 CSS Button Hover Transitions 动画实现指南30 seconds of code 实战五种 CSS Button Hover Transitions 动画实现指南 CSS 过渡transition是教程文档30 Seconds of Code用 CSS 缓动变量Easing Variables打造高级动画节奏30 Seconds of Code用 CSS 缓动变量Easing Variables打造高级动画节奏 导读 本文源自 30 seconds of co教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考