css实现太极图

<template><div><!-- 太极图 --><div class="all"><div class="left box"></div><div class="right box"></div><div class="black"><div class="inner_white"></div></div><div class="white"><div class="inner_black"></div></div></div></div>
</template>
<script>
export default {data() {return {};},watch: {},created() {},methods: {},
};
</script>
<style lang='less' scoped>
.all{border:5px solid black;border-radius: 50%;width: 300px;height: 300px;margin:0 auto;margin-top:15%;overflow: hidden;display: flex;position: relative;animation: action 5s linear infinite;.box{width: 50%;height: 100%;}.left{background: #fff;}.right{background: #000;}.black{background: #000;width: 145px;height: 145px;border-radius: 50%;box-sizing: border-box;position: absolute;left:50%;margin-left: -75px;display: flex;align-items: center;justify-content: center;.inner_white{width: 30px;height: 30px;border-radius: 50%;background: #fff;}}.white{background: #fff;width: 145px;height: 145px;border-radius: 50%;box-sizing: border-box;position: absolute;left:50%;bottom:0;margin-left: -75px;display: flex;align-items: center;justify-content: center;.inner_black{width: 30px;height: 30px;border-radius: 50%;background: #000;}}
}@keyframes action {0%{transform: rotate(0);}25%{transform: rotate(-90deg);}50%{transform: rotate(-180deg);}75%{transform: rotate(-270deg);}100%{transform: rotate(-360deg);}
}
</style>