就是做一个一条线在周围转啊转的效果 我的效果： 大概思路是四条线，在周围一直走。

写在前面

兄弟们，别光收藏，点个赞👍👍👍啊🤣，beiwei（csdn居然认为这个词语是敏感词😑）求赞

如果你想要的更多边框特效，这里还有 <a href="https://blog.csdn.net/qq_39370934/article/details/118439096">有趣的CSS | css-border特效（转动边框，彩虹边框，渐变边框）和css变量⇲</a>

参考：<a href="http://www.bootstrapmb.com/item/8304/preview">传送门⇲</a> 上面的效果大家f12就知道怎么做了

写在后面

另外还有下面这种效果。<a href="https://www.jq22.com/yanshi3297">传送门⇲</a>

另外鼠标划入特效。<a href="https://www.jb51.net/css/440762.html">传送门</a>

<a href="http://demo.jb51.net/js/2016/button-border%28jb51.net%29/">在线预览</a> <a href="https://dxz5.jb51.net/201603/yuanma/button-border%28jb51.net%29.rar">源码下载</a> 当然还有一些 <a href="http://siyouku.cn/Wenqing/Animation">花里花哨的效果</a>，可做学习css3用(审查元素查看css样式文件，都是比较基础的东西)

以上特效，大家f12均可查看实现方式，甚至有的可以下载源码。 下面我把我做的边框流光特效实现贴出来，以便日后 ctrl CV

<li v-for="(item,index) in indoorParams" :key="index">
  //其他代码。。。
  <div class="animate-border">
   <i></i>
   <i></i>
  </div>
</li>

<style lang="scss">
ol li{
  /* border: 1px solid rgba(32,254,255,.3); */
  /* 宽高和相对定位是一定要给的,因为这会影响.animate-border子元素的定位 */
  position: relative;
  width: 3rem;
  height: 5rem;
  overflow: hidden;
  /* 利用伪元素和两个i元素产生4条线 */
  .animate-border{
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   &amp;::before, &amp;::after{
     content: "";
     position: absolute;
     width: 100%;
     height: 1px;
   }
   i {
     position: absolute;
     display: inline-block;
     height: 100%;
     width: 1px;
   }
   &amp;::before{
     top: 0;
     left: -100%;
     background-image: linear-gradient(90deg,transparent,#03e9f4);
     /* name  duration timing-function delay iteration-count diraction */
     animation: one 4s linear infinite;
   }
   i:nth-child(1){
     top: -100%;
     right: 0;
     background-image: linear-gradient(180deg,transparent,#03e9f4);
     animation: two 4s linear 1s infinite;
   }
   &amp;::after{
     bottom: 0;
     right: -100%;
     background-image: linear-gradient(-90deg,transparent,#03e9f4);
     animation: three 4s linear 2s infinite;
   }
   i:nth-child(2){
     bottom: -100%;
     left: 0;
     background-image: linear-gradient(360deg,transparent,#03e9f4);
     animation: four 4s linear 3s infinite;
   }
  }
}
@keyframes one {
  0% {
   left: -100%;
  }
  50%, 100% {
     left: 100%;
  }
}

@keyframes two {
  0% {
   top: -100%;
  }
  50%, 100% {
     top: 100%;
  }
}

@keyframes three {
  0% {
   right: -100%;
  }
  50%, 100% {
   right: 100%;
  }
}

@keyframes four {
  0% {
   bottom: -100%;
  }
  50%, 100% {
   bottom: 100%;
  }
}
</style>

以上。

原文地址：https://blog.csdn.net/qq_39370934/article/details/107318428?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168474923816800184124264%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168474923816800184124264&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-12-107318428-null-null.142^v87^control_2,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88