<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>