太极图这样可可以吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-5</title>
    <style type="text/css">
 .big-circle {
            position: relative;
 box-sizing: content-box;
 width: 400px;
 height: 200px;
 margin: auto;
 border: 1px solid red;
 border-bottom: 200px solid red;
 border-radius: 50%;
 transform-origin: 50% 50%;
 animation-name: rotate;
 animation-duration: 5s;
 animation-timing-function: linear;
 /*此处写代码*/
 animation-iteration-count: infinite;
 }

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

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

        .circle {
            position: absolute;
 width: 200px;
 height: 200px;
 border-radius: 50%;
 }

        .red {
            background-color: red;
 }

        .white {
            background-color: white;
 }

        .middle-red {
            top: 100px;
 left: 0;
 }

        .middle-white {
            top: 100px;
 left: 200px;
 }

        .inner-white {
            transform: scale(0.2);
 top: 100px;
 left: 0;
 }

        .inner-red {
            transform: scale(0.2);
 top: 100px;
 left: 200px;
 }
    </style>
</head>
<body>
<div class="big-circle">
    <div class="circle red middle-red"></div>
    <div class="circle white middle-white"></div>
    <div class="circle red inner-red"></div>
    <div class="circle white inner-white"></div>
</div>
</body>
</html>

太极图这样可可以吗？看到原有代码里面给大圆的定位是absolute，不知道怎么实现，我把它改成了relative

VisaW 2018-01-12

源自：CSS3动画 2-17 编程练习