#demo #codepen #前端 #CSS #SVG
文本框边框动画旋转 [CSS & SVG] V2
在 Fernando Cohen 制作的这个流畅的 CSS 和 SVG 动画中，文字栅栏围绕着一张照片的边缘。看看悬停照片时会发生什么

看了一下原理，这是一个使用 SVG 和 CSS 创建的文字沿着有机形状边框旋转动画效果。
首先使用 SVG Blob 形状生成，创造有机的 blob 形状

<path d="M43.1,-68.5C56.2,-58.6,67.5,-47.3..." />


这个路径数据可能来自 Blob Generator 等工具

然后是使用 clip-path 进行图片裁剪，将矩形图片裁剪成 blob 形状，同时通过 preserveAspectRatio="xMidYMid slice" 确保图片填充满整个区域。

<clipPath id="blobClip">
  <path d="..." transform="translate(100 100)"/>
</clipPath>
<image clip-path="url(#blobClip)" />


然后使用 pathLength 进行文字路径动画，定义文字路径

<path id="text" d="..." fill="none" stroke="none" pathLength="100" />


• pathLength="100" 标准化路径长度，便于动画计算
• fill="none" stroke="none" 路径本身不可见，仅作为文字轨迹

将文字沿路径排列：

<text class="text-content">
  <textPath href="#text" startOffset="0%">
    ❤️ MADE WITH LOVE ❤️ MADE WITH LOVE...
    <animate attributeName="startOffset" 
             from="0%" to="100%" 
             dur="15s" 
             repeatCount="indefinite" />
  </textPath>
</text>


• <textPath> 让文字沿着指定路径排列
• startOffset 控制文字在路径上的起始位置
• <animate> 元素实现 SMIL 动画（SVG 原生动画）

那无缝循环是怎么做的呢？他用了两段文字，当第一段文字从 0% 移动到 100% 时，尾部会消失，第二段文字从 -100% 移动到 0%，正好填补空白。两段文字首尾相连，形成无缝循环。

<textPath href="#text" startOffset="0%">
  <animate from="0%" to="100%" />
</textPath>

<textPath href="#text" startOffset="100%">
  <animate from="-100%" to="0%" />
</textPath>


最后是这个交互式缩放效果，是通过悬停时放大裁剪区域（而非整个 SVG）来做的。
 
 
Back to Top