`CSS`----盒子中间透明圆形并设置旋转效果

CSS----盒子中间透明圆形并设置旋转效果

1、先给盒子 background设置渐变，区分模块

 <div class="entry">
    <div class="entry-box">
      <div class="entry-box-item">
      </div>
    </div>
  </div>

.entry {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .entry-box {
    width: 100%;
    height: 100%;
    object-fit: fill;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .entry-box-item {
    width: 60vw;
    height: 20vw;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: radial-gradient(
      circle,
      rgb(255, 0, 0),
      rgb(255, 0, 0) 10vw,
      rgb(0, 128, 0) 10vw,
      rgb(0, 128, 0) 12vw,
      rgb(0, 119, 255) 12vw,
      rgb(0, 119, 255) 40vw
    );
    }

效果图

2、设置背景颜色的透明的

  .entry-box-item {
    width: 60vw;
    height: 20vw;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: radial-gradient(
      circle,
      rgba(255, 0, 0, 0),
      rgba(255, 0, 0, 0) 10vw,
      rgba(0, 128, 0, 0) 10vw,
      rgba(0, 128, 0, 0) 12vw,
      rgba(0, 119, 255, 0.555) 12vw,
      rgba(0, 119, 255, 0.555) 40vw
    );
}

效果图

3、给中间添加两个半径大小不一致的圆，并设置定位，添加旋转效果,颜色自定义，也可以使用图片

 <div class="entry-box-item">
        <div class="item-center-line"></div>
        <div class="item-center-pie"></div>
      </div>

 .item-center-line {
      width: 20vw;
      height: 20vw;
      background-color: transparent;
      border-top: 0.5vw solid #80bff7;
      border-bottom: 0.5vw solid #80bff7;
      border-radius: 50%;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: calc(50% - 10vw);
    }

    .item-center-pie {
      width: 16vw;
      height: 16vw;
      background-color: transparent;
      border-top: 0.5vw solid #80bff7;
      border-bottom: 0.5vw solid #80bff7;
      border-radius: 50%;
      box-sizing: border-box;
      position: absolute;
      top: 2vw;
      left: calc(50% - 8vw);
    }

效果图

4、给中间的两个圆，分别添加逆时针和顺时针旋转动画

    .item-center-line {
      width: 20vw;
      height: 20vw;
      background-color: transparent;
      border-top: 0.5vw solid #80bff7;
      border-bottom: 0.5vw solid #80bff7;
      border-radius: 50%;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: calc(50% - 10vw);
       animation: rotate 8s infinite linear;
    }

    .item-center-pie {
      width: 16vw;
      height: 16vw;
      background-color: transparent;
      border-top: 0.5vw solid #80bff7;
      border-bottom: 0.5vw solid #80bff7;
      border-radius: 50%;
      box-sizing: border-box;
      position: absolute;
      top: 2vw;
      left: calc(50% - 8vw);
       animation: rotate1 8s infinite linear;
    }
  }
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


@keyframes rotate1 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

效果图

5、完整代码

<template>
  <div class="entry">
    <div class="entry-box">
      <div class="entry-box-item">
        <div class="item-center-line"></div>
        <div class="item-center-pie"></div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.entry {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .entry-box {
    width: 100%;
    height: 100%;
    object-fit: fill;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .entry-box-item {
    width: 60vw;
    height: 20vw;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: radial-gradient(
      circle,
      rgba(255, 0, 0, 0),
      rgba(255, 0, 0, 0) 10vw,
      rgba(0, 128, 0, 0) 10vw,
      rgba(0, 128, 0, 0) 12vw,
      rgba(0, 119, 255, 0.555) 12vw,
      rgba(0, 119, 255, 0.555) 40vw
    );

    .item-center-line {
      width: 20vw;
      height: 20vw;
      background-color: transparent;
      border-top: 0.5vw solid #80bff7;
      border-bottom: 0.5vw solid #80bff7;
      border-radius: 50%;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: calc(50% - 10vw);
       animation: rotate 8s infinite linear;
    }

    .item-center-pie {
      width: 16vw;
      height: 16vw;
      background-color: transparent;
      border-top: 0.5vw solid #80bff7;
      border-bottom: 0.5vw solid #80bff7;
      border-radius: 50%;
      box-sizing: border-box;
      position: absolute;
      top: 2vw;
      left: calc(50% - 8vw);
       animation: rotate1 8s infinite linear;
    }
  }
}

/* 定义中间球体顺时针转动 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 定义中间圆逆时针转动 */
@keyframes rotate1 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}
</style>