CSS邊框移動光動畫是一種通過CSS動畫效果實現的邊框光感動畫，把移動的光線嵌套在邊框之內，讓整個界面更加有活力，下面我們來看一下它的實現方式。

.box {
position: relative;
width: 200px;
height: 200px;
background-color: #fff;
border: 2px solid #333;
overflow: hidden;
}
.box:before {
content: "";
position: absolute;
top: 0;
left: -50px;
width: 50px;
height: 100%;
background: linear-gradient(to left, rgba(255,255,255,0), #fff, rgba(255,255,255,0));
animation: moveLeft 2s infinite;
}
.box:after {
content: "";
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 50px;
background: linear-gradient(to top, rgba(255,255,255,0), #fff, rgba(255,255,255,0));
animation: moveTop 2s infinite;
}
@keyframes moveLeft {
from {
transform: translateX(-50px);
}
to {
transform: translateX(200px);
}
}
@keyframes moveTop {
from {
transform: translateY(-50px);
}
to {
transform: translateY(200px);
}
}

首先在一個盒子中設置一個偽元素:before，寬度為50px，高度為100%，背景為從左到右的線性漸變。然后設置它的動畫效果是從左到右移動，無限循環。

接下來再設置一個偽元素:after，高度為50px，寬度為100%，背景為從上到下的線性漸變。然后設置它的動畫效果是從上到下移動，無限循環。

通過這兩個偽元素的交錯移動，就實現了一個簡單的邊框移動光動畫。