css怎么做出这种按路径移动的光效啊？

img

如图 让光电按着路线移动 要一直重复播放 怎么实现啊？

或者帮忙做个gif也行。或者有没有做gif的教程啊。

GIF叫UI整不就完事了吗

可以用canvas画

你这直线的，canvas很简单啊。

给你写了个CSS的例子，结合animation特性使用：

（如果这个网页的代码消失了，自行替换下面源代码部分）

效果图：（红色块围绕着黑色框边界运动）

img


```css

.bg{
    width: 100%;
    height: 300px;
    border: 2px solid black;
}
.light {
  width: 50px;
  height: 10px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes example {
  0%   {left:0px; top:0px;}
  25%  {left:calc(100% - 50px); top:0px;}
  50%  {left:calc(100% - 50px); top:290px;}
  75%  {left:0px; top:290px;}
  100% {left:0px; top:0px;}
}





<div class="bg">
<div class="light"></div>
</div>

```