怎么用css做一个流动的边框，大佬们求教

Question

Answer 1

用一个锥形渐变在背景旋转即可

 .box{
      padding:4px;
      position: relative;
      overflow: hidden;
    }

    .box>*{
      background-color: #fff;
      position: relative;
    }

    .box:before{
      content: '';
      animation: roll linear 2s infinite ;
      background: conic-gradient(#58e, #fff);
      position: absolute;
      width: 1000px;
      height: 1000px;
      left: 50%;
      top: 50%;
    }

    @keyframes roll {
      from{
        transform: translate(-50%, -50%) rotateZ(0deg) ;
      }
      to{
        transform:translate(-50%, -50%) rotateZ(-360deg) ;
      }
    }

<div class="box">
  <div style="height: 100vw;"></div>
</div>

Answer 2

一个比较直接的办法
https://jsbin.com/razegup/edit?html,css,output

Answer 3

CSS 关键字 conic-gradient

各种边框动画

Answer 4

看一下这个符合你的需求吗？可以把背景色定义为淡蓝色，流动的那块用渐变色。

Answer 5

直接百度不香嘛 https://blog.csdn.net/u011283...

Answer 6

想了半天，线肯定是不能拐弯的，想了个复杂点儿的办法：
1.4条长度都等于两倍周长的渐变线，分别定位覆盖在4条边上
2.白色带shadow的圆或者方块定位在边上
3.通过animation动画定义4条线和的运动方向及轨迹
4.盒子加上overflow:hidden
5.慢慢调试动画时间，以达到无缝连接的状态

Answer 7

svg 来实现这个效果

Answer 8

给后面大背景用linear-gradient，然后改变角度。前面用其他盒子挡住，应该就可以做出这种视觉效果