css 实现太极图

 

<template>
  <div class="box">
    <div class="circle"></div>
  </div>
</template>
<script>
export default {
  props: [],
  data() {
    return {};
  },
  watch: {},
  methods: {
    init() {},
  },
  mounted() {
    this.init();
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  background: rgb(3, 33, 51);
}

.circle {
  position: relative;
  margin: auto;
  width: 300px;
  height: 300px;
  align-self: center;
  border-left: 150px solid #000;
  border-right: 150px solid #fff;
  border-radius: 50%;
  animation: rotate 3s infinite linear;
  --colorA: #b78eff;
  filter: drop-shadow(0 0 2px var(--colorA)) drop-shadow(0 0 5px var(--colorA))
    drop-shadow(0 0 10px var(--colorA)) drop-shadow(0 0 20px var(--colorA));
}
.circle::before {
  content: "";
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 38px;
  left: -38px;
  box-shadow: 0 150px 0 #fff;
  z-index: 1;
  --colorA: #ffec41;
  --colorB: #b78eff;
  filter: drop-shadow(0 0 1px var(--colorA)) drop-shadow(0 0 5px var(--colorB))
    drop-shadow(0 0 10px var(--colorB)) drop-shadow(0 0 20px var(--colorA));
}
.circle::after {
  content: "";
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -75px;
  background-color: #fff;
  box-shadow: 0 150px 0 #000;
}
@keyframes rotate {
  100% {
    transform: rotate(-360deg);
  }
}
</style>

星空图