不一样的径向渐变动画

INFO

conic-gradient 最后一个颜色用第一个颜色是用来修复尖锐的过度效果

盒子内容

查看代码

<template>
  <div class="container">
    <div class="item item1"></div>
    <br />
    <div class="item item2">
      <div class="box">盒子内容</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

.item {
  width: 300px;
  height: 300px;
  padding: 10px;
  // 最后一个颜色用第一个颜色是用来修复尖锐的过度效果
  background-image: conic-gradient(from var(--angle), red, blue, red);
  animation: 1s spin infinite linear;
}
.item2 .box {
  display: block;
  background: black;
  color: white;
  width: 280px;
  height: 280px;
}
</style>