Css_动态渐变圆圈旋转效果

1、效果图

2、实现代码

<template>
  <div class="box">
    <div class="line"></div>
    <div class="lineNew"></div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.searchBox {
  display: flex;
  margin-bottom: 2vh;
  .logo {
    flex: 0.8;
    display: inline-block;
    background-color: #409efc;
    height: 10vh;
  }
  .input-with-select {
    flex: 1;
    margin: 2vh 14vh 2vh 5vh;
  }
}
.slideshow {
  height: 15vh;
  border-radius: 16px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recommend {
  margin-top: 3vh;
  .refer {
    float: left;
    font-size: 20px;
  }
  .city {
    margin-top: 1vh;
    float: right;
    span {
      margin-right: 5vh;
    }
  }
  .el-dropdown-link:focus {
    outline: none;
  }
}
.box {
  width: 200px;
  height: 200px;
  font-size: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box .line {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-style: solid;
  border-color: #00bfff transparent transparent #00bfff;
  border-width: 2px 2px 0 0;
  animation: animate 3s linear infinite normal;
}
.box .lineNew {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-style: solid;
  border-color: transparent #00ff11 #00ff11 transparent;
  border-width: 0 0 2px 2px;
  animation: animate 3s linear infinite normal;
}
@keyframes animate {
  to {
    transform: rotate(1turn);
  }
}
</style>

原文地址：https://blog.csdn.net/Rainbow_bead/article/details/142383737

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！