转圈圈的css

<template>
  <div class="circle">
    <div class="loader"></div>
  </div>
</template>

<script setup>
</script>

<style scoped lang="less">
.circle{
  width: 100vw;
  height: 100vh;
  background-color: #001d30;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: changeBg 5s linear infinite;
  @keyframes changeBg{
    to
    {
      filter:  hue-rotate(360deg);
    }
  }
  .loader{
    position: absolute;
    width: 150px;
    height: 150px;
    background: linear-gradient(to top, #001d30 40%, #51eeee);
    // https://www.runoob.com/cssref/func-linear-gradient.html
    border-radius: 50%;
    animation: rotate 2s linear infinite;
  }
  @keyframes rotate{
    to
    {
      transform:  rotate(360deg);
    }
  }
  .loader::before{
    content: '';
    position: absolute;
    background: #001d30;
    inset: 20px 20px 0 0;
    border-radius: 50%;
  }
  .loader::after{
    content: '';
    position: absolute;
    top: 50px;
    right: -8px;
    width: 40px;
    height: 40px;
    background: #51eeee;
    border-radius: 50%;
    box-shadow: 0 0 5px #51eeee,0 0 25px #51eeee,0 0 50px #51eeee,0 0 75px #51eeee;
  }
}
</style>