在浏览minimal-portfolio-swart.vercel.app这个网站时，我注意到了一个引人注目的交互设计。这个交互不仅令人眼前一亮，而且极大地提升了用户体验。具体来说，如上图所展示，卡片上有一根优雅的白色线条在缓缓环绕，与此同时，线条所经之处还伴随着一块细腻的模糊阴影。特别值得一提的是，当线条经过卡片的圆角部分时，那种流畅的过渡和细腻的视觉效果，让人感受到了一种极致的丝滑感，仿佛是在欣赏一场精致的视觉盛宴。

今天的文章就来解析如何实现这种效果，文末附源码预览地址。根据示例图片分析需要实现的功能点如下：

● 线条跟随卡片边框匀速移动

● 线条内部对应有模糊阴影

● 圆角部分丝滑动画

这里为什么单独说明圆角部分是因为这块需要特殊处理，请看后面的文章。

深入思考

初见这个效果，我被其丝滑的动画呈现所吸引。如果这种沿着边框移动的动画元素是实时根据当前边框进行复杂计算得出的，那么无疑会大大增加实现的难度，并且可能会使许多开发者望而却步。

然而，我们可以采取一种更为简洁和巧妙的思路。实际上，移动的线条元素并不直接依赖于边框的形状或尺寸。它仅仅是一个元素，沿着预设的路径（即模拟的边框路径）进行移动。同时，线条与卡片内部的阴影共同构成了一个整体效果，通过透视或阴影投射的方式，使得这种效果看起来像是线条“贴合”在卡片边框上移动，并在内部产生了相应的阴影效果。

这样的实现方式不仅简化了算法和计算过程，而且能够使效果更加流畅和自然，同时也降低了开发者的实现难度。

通过透视实现边框效果

通过透视的方式实现一个边框效果，我们可以用2个盒子嵌套，父级设置1像素的padding，如下代码简单的实现一个边框效果。

.outer {
  width: 400px;
  height: 200px;
  margin: 100px;
  background: rgb(54, 224, 202);
  padding: 1px;
  position: relative;
}

.inner {
  background: rgb(99, 99, 99);
  width: 100%;
  height: 100%;
}

效果图：

然后增加一个子元素作为移动的元素，这个元素基于父级定位在边框位置，由于动画是沿着卡片内部四周移动，要确保在每一条边上的透出的长度保持一致，所有创建的这个子元素是一个正方形。

.moving-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: #fff;
    animation: moveAround 8s linear infinite;
}

并对这个元素增加简单的animation动画，沿着内边框移动。

这个动画需要注意的一个点是要使元素在移动的过程中保持匀速的动画，需要计算每个关键帧之间的距离，并根据这些距离来调整每个关键帧的百分比。这样可以确保元素在每个时间段内移动的距离与时间成正比，从而实现真正的匀速移动。

这里我们以上面的卡片举例，其宽度为400px，高度为200px，元素沿矩形的边框移动。

● 计算总路径长度：总长度 = 2 (宽度 + 高度) = 2 (400px + 200px) = 1200px

● 计算每段所占的时间比例：水平边所占比例 = 400px / 1200px = 1/3 ≈ 33.33%，垂直边所占比例 = 200px / 1200px = 1/6 ≈ 16.67%

动画代码如下：

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: calc(100% - 80px);
    }
    50% {
        top: calc(100% - 80px);
        left: calc(100% - 80px);
    }
    83.33% {
        top: calc(100% - 80px);
        left: 0px;
    }
}

最终完成的简单版动画效果如下：

这里为了方便大家看增加了透明度展示内部移动的元素，若去掉透明度则只有边框上的一根线。

边框效果处理

仔细看上面的图可以发现在边框尽头时的过渡效果不好，瞬间从一条边切换到另一条边。首先还原网站的效果，增加边框圆角，然后将内部移动的元素通过圆角变成一个圆形，这时候还需要同步调整内部元素的定位和动画移动时设置的定位，保证内部圆形的中心和边框的一致。

增加圆角处理：

.outer {
  border-radius: 20px;
}

.inner {
  border-radius: 20px;
}

.moving-element {
  border-radius: 40px;
  /* 圆心和边框一致 */
  transform: translate(-40px, -40px);
}

调整动画过程中的定位：

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 100%;
    }
    83.33% {
        top: 100%;
        left: 0px;
    }
}

此时的动画效果：

此时的边框位置动画已经很接近网站的效果，进一步观察在图中的效果可以发现在边框角落的位置有一点卡顿的感觉，这是因为边框位置我们设置了圆角，但是元素移动的轨迹是直角，导致视觉上停顿了一下。这里我们需要进一步优化animation。设置圆角后内部动画元素移动的点应该从4个变成8个，且对应的位置需要和圆角的大小一一对应才能保障流畅的动画效果。

如下所示黑色圆点是到四个顶点的动画坐标，新的绿色圆点是基于圆角后的动画移动坐标。

基于上面的动画百分比算法计算出最新的比例及坐标代码如下：

@keyframes moveAround {
  0% { left: 40px; top: 0px; }
  28.93% { left: 360px; top: 0px; } 
  33.99% { left: 400px; top: 40px; } 
  44.82% { left: 400px; top: 160px; }
  49.88% { left: 360px; top: 200px; } 
  78.81% { left: 40px; top: 200px; }
  83.87% { left: 0px; top: 160px; } 
  94.70% { left: 0px; top: 40px; } 
  100% { left: 40px; top: 0px; } 
}

这里的动画需要注意的是圆角部分绿色按钮之间的动画距离需要使用使用勾股定理计算。比如右上角的两个点之间的计算方式是：

从 (360, 0) 到 (400, 40) = √((400-360)² + (40-0)²) = √(1600 + 1600) = √3200 ≈ 56.57px

此时的动画效果：

模糊阴影

现在就差最后的阴影部分还未实现，仔细观察移动的线条并不是全实心纯色，而是有渐变的效果，目前移动的元素是一个正方形，设置背景色为径向渐变即可，修改背景色的代码如下：

background-image: radial-gradient(#fff 40%,transparent 80%);

现在还需要将内部的渐变进一步模糊，注意这里仅仅是模糊元素背后的背景，不能影响卡片上面其他的元素内容展示。这里我们使用backdrop-filter设置blur模糊效果。

CSS属性 backdrop-filter 用于在元素后面的区域上应用图形效果（如模糊或颜色偏移）。这个属性可以让你对元素背后的背景进行处理，而不影响元素本身的前景内容。

最后进一步调整颜色还原网站的效果如下：

这个效果不仅可以做卡片展示，作为按钮的背景效果也很不错：

最后

到此整体的代码实现过程就结束了，完整还原的网站的动画效果。这是一个对用户体验很不错的卡片效果，原网站实现的部分细节不一样，整体实现原理差不多，基于两个元素的1像素间距透出移动的线条，配合使用backdrop-filter设置纯背景模糊效果，有兴趣的可以尝试看看。