关于css3:css3-preserve3d实现圆环绕物体以及动画效果

实现成果

间接上代码

<template>
  <section class="sensorConfirm index">
    <el-row :gutter="5">
      <el-col :span="12">
        <div class="common-container">
          <div class="watchContainer">
            <div class="safeScore">
              <div class="dun">
                <img
                  src="./images/dun.png"
                  alt=""
                >
                <span class="mark">{{score}}</span>
                <span class="level score_level">{{totle_text}}</span>
                <h3> 防护能力评分 </h3>
              </div>
              <div class="swipCircle">
                <div />
              </div>
              <div class="baseCircle">
                <img
                  class="spin1 innerCircle"
                  src="./images/innerCircle.png"
                  alt=""
                >
                <img
                  class="spinreverse outerCircle"
                  src="./images/outerCircle.png"
                  alt=""
                >
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </section>
</template>

<script>
export default {
  name: 'SensorConfirm',
  props: { },
  data() {
    return {
      score: 60.5,
      totle_text: '个别',
      totle_class: ''
    }
  },
  created() {},
  updated() {},
  mounted() {},
  methods: {}}
</script>

<style lang="scss">
.index {
  .watchContainer {
    height: 250px;
    .safeScore {
      position: absolute;
      width: 200px;
      height: 100%;
      text-align: center;
      margin-top: 5px;
      top: 9%;
      left: 14%;
      perspective: 1000px;
      transform-style: preserve-3d;
      .dun {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateZ(-100px);
        width: 118px;
        height: 130px;
        z-index: 20;
        top: 0px;
        animation: jump 3s both infinite;
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
      .mark,
      .level {
        position: absolute;
        top: 37%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        z-index: 3;
        font-weight: bold;
        color: #e6a23c;
      }
      .level {
        top: 56%;
        font-size: 12px;
      }
      h3 {
        font-size: 12px;
        color: whitesmoke;
        position: absolute;
        top: 22%;
        width: 100px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
      }
      .mark {
        top: 35%;
        left: 50%;
        font-size: 25px;
      }
      .baseCircle {
        position: absolute;
        transform: translate(-50%, -50%) rotateX(68deg);
        z-index: 0;
        left: 50%;
        top: 52%;
        width: 100px;
        height: 114px;
        background: url(./images/bgCircle.png) no-repeat;
        background-size: 100% 100%;
      }
      .innerCircle,
      .outerCircle {
        position: absolute;
        width: 130px;
        height: 130px;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
      }
      .outerCircle {
        left: 50%;
        top: -18%;
        height: 170px;
        width: 170px;
      }
      .swipCircle {
        width: 200px;
        height: 200px;
        perspective: 250px;
        transform-style: preserve-3d;
        div {
          width: 200px;
          padding: 20px;
          top: -20px;
          height: 200px;
          border-radius: 60%;
          border: 3px solid #4cc2ff;
          position: absolute;
          animation: move 3s linear infinite;
        }
      }
    }
    @keyframes move {
      0% {
        top: -80px;
        transform: translate3d(0px, -30px, -25px) rotateX(68deg) scale(1);
      }
      25% {
        top: 10px;
        transform: translate3d(0px, -30px, -25px) rotateX(68deg) scale(0.6);
      }
      75% {
        top: 10px;
        transform: translate3d(0px, -30px, -25px) rotateX(68deg) scale(0.8);
      }
      100% {
        top: -80px;
        transform: translate3d(0px, -30px, -25px) rotateX(68deg) scale(1);
      }
    }
    .spin1 {animation: spin 4s linear infinite;}
    .spinreverse {animation: spin 5s linear infinite reverse;}
    @keyframes spin {
      from {transform: translateX(-50%) rotate(0deg);
      }
      to {transform: translateX(-50%) rotate(360deg);
      }
    }
    @keyframes jump {
      0% {top: 0%;}
      50% {top: -5%;}
      100% {top: 0%;}
    }
  }
}
</style>