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

伊_许
  • 11

image.png

回复
阅读 6k
8 个回答

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

 .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>

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

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

svg 来实现这个效果

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏