思考

当我看到这个效果的时候，我第一感觉就是丝滑。如果根据当前边界实时计算沿边界移动的动画元素，难度和算法会让很多人望而却步。

我们需要改变我们的想法。本质上移动的线条元素与边框无关，而是沿着边框移动的元素。卡片内部的线条和阴影是一个元素，这种效果是通过一定的视角产生的。

透视

为了通过透视实现边框效果，我们可以使用2个嵌套框并在父级上设置1像素的填充。下面的代码简单实现了边框效果。

.outer { width: 400px;高度： 200px；边距： 100px；背景： rgb(54, 224, 202);内边距： 1px；相对位置：}.inner { 背景： rgb(99, 99, 99);宽度： 1 00%;高度： 100%; }渲染：

然后添加一个子元素作为移动元素。该元素位于基于父元素的边框处。由于动画在卡片内部移动，因此请确保每一面的曝光长度保持一致。所有创建的子元素都是一个正方形。

.moving-element {position: 绝对；顶部： 0;左： 0；宽度： 80px；高度： 80px；背景：#fff； animation: moveAround 8s 线性无限；} 并给这个元素添加一个简单的animation动画，使其沿着内边框移动。

关于此动画需要注意的一点是，为了在元素移动时保持均匀的动画，您需要计算每个关键帧之间的距离，并根据这些距离调整每个关键帧的百分比。这样保证了元件在每个时间段移动的距离与时间成正比，从而实现真正的匀速运动。

这里我们以上面的卡为例。它的宽度是400px，高度是200px。元素沿着矩形的边界移动。

计算总路径长度：总长度=2（宽+高）=2（400px+200px）=1200px 计算各段占用的时间比例：水平边比例=400px/1200px=1/333.33%，垂直边的比例=200px/1200px=1/6 16.67%。动画代码如下：

@Keyframes 移动{0%, 100% {top: 0px; left: 0px;} 33.33% {TOP: 0px;} Left: CALC (100% -80px);} 50% {TOP: CALC (100% -80px);}左： CALC（100% 100% – 80px）； 83.33% { top: 计算(100% – 80px);左： 0px； }}动画最终的简单版本如下：

这里为了方便大家，添加了透明度来显示内部的移动元素。如果去掉透明度，边框上就只剩下一条线了。

边框效果处理

如果仔细观察上图，可以发现边框末端的过渡效果并不好，瞬间从一个边缘切换到另一个边缘。首先还原网站的效果，添加边框圆角，然后通过圆角将内部的移动元素变成圆形。这时候还需要同步内部元素的定位和动画移动时设置的定位，保证内部圆的中心。与边界相同。

纯CSS丝滑边框线动画

添加圆角：

.outer { border-radius: 20px;}.inner { border-radius: 20px;}.moving-element { border-radius: 40px; /* 圆心与边框一致*/transform: translate(-40px, -40px);}调整动画过程中的定位：

@keyframes moveAround { 0%, 100% { top: 0px;左： 0px； 33.33% { top: 0px;左： 100%； } 50% { top: 100%;左： 100%； } 83.33% { top: 10 0%;左： 0px； }}此时的动画效果：

此时边框位置动画已经非常接近网站的效果了。如果进一步观察图中的效果，可以发现边框一角有一点卡住的感觉。这是因为我们在边框位置设置了圆角，但元素移动的轨迹却是直角，造成了视觉上的停顿。这里我们需要进一步优化动画。设置圆角后，内部动画元素的移动点数量应由4个变为8个，且对应的位置需要与圆角的大小一一对应，以保证动画效果流畅。

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

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

此时的动画效果：