流动边框

效果展示

实现原理

用背景进行旋转，超出想显示的范围则 hidden ，就有以上的效果，可以用 after 或者 before 元素来实现也可以。

示例代码

<!-- 流动边框.vue -->
<template>
  <div class="main">
    <demo1></demo1>
    <demo2></demo2>

    <div class="demo3">
      <demo style=""></demo>
    </div>

    <div class="border-image-clip-path"></div>

  </div>
</template>

<script setup>
import demo from './流动边框-组件.vue'
import demo1 from './流动边框-demo-1.vue'
import demo2 from './流动边框-demo-2.vue'

</script>

<style lang="scss" scoped>
.main{
  display: flex;
  gap: 10px;
}

.demo3{
  position: relative;
  width: 200px;
  height: 100px;
  border: 1px solid blue;
  background-color: red;
}


.border-image-clip-path {
    width: 200px;
    height: 100px;
    margin: auto;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0px round 10px);
    animation: huerotate 6s infinite linear;
    filter: hue-rotate(360deg);
}

@keyframes huerotate {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rorate(360deg);
    }
}

</style>

<!-- ./流动边框-demo-1.vue -->

<template>
  <div class="demo-box">

    <div class="box">
      <div class="under"></div>
      <!-- <span></span> -->
    </div>

    <div class="box">
      <div class="under"></div>
      <span></span>
    </div>

  </div>
</template>

<style scoped lang="scss">
.demo-box {
  display: flex;

  .box {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 4px;
    &:last-of-type{
      margin-left: 10px;
    }

    .under {
      position: relative;
      width: 0px;
      height: 0px;
      border-top: 100px solid yellow;
      border-right: 100px solid green;
      border-bottom: 100px solid red;
      border-left: 100px solid blueviolet;
      left: -50px;
      top: -50px;
      animation: rotate 10s linear infinite;
    }

    span {
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 8px;
      right: 8px;
      border-radius: 4px;
      background-size: cover;
      background-image: url(https://img-blog.csdnimg.cn/20201011132854978.jpg);
      background-color: white;
      border: 1px solid blue;
    }
  }
}

@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}
</style>

<!-- ./流动边框-demo-1.vue -->

<template>
  <div class="demo-box">

    <div class="box">
      <div class="under2"></div>
      <!-- <span></span> -->
    </div>

    <div class="box">
      <div class="under2"></div>
      <span></span>
    </div>

  </div>
</template>

<style scoped lang="scss">
.demo-box {
  display: flex;

  .box {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 4px;
    &:last-of-type{
      margin-left: 10px;
    }

    .under2 {
      position: absolute;
      width: 0px;
      height: 0px;
      border-top: 100px solid rgb(0, 255, 13);
      border-right: 100px solid rgb(45, 218, 203);
      border-bottom: 100px solid rgb(255, 106, 156);
      border-left: 100px solid rgb(251, 255, 26);
      left: -50px;
      top: -50px;
      animation: rotate2 2s linear infinite;
    }

    span {
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 8px;
      right: 8px;
      border-radius: 4px;
      background-size: cover;
      background-image: url(https://img-blog.csdnimg.cn/20201011132854978.jpg);
      background-color: white;
    }
  }
}

@keyframes rotate2 {
  0% {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(-1turn);
  }
}
</style>

参考学习