太极

静态太极

HTML代码

 <div class="taiji">
        <div class="white">
            <div class="whiteCircle">
                <div class="miniCircle"></div>
            </div>
        </div>
        
        <div class="black">
            <div class="blackCircle">
                <div class="miniCircle"></div>
            </div>
        </div>
    </div>

CSS代码

<style>
        body{
            background-color: grey;
        }
        .taiji{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            overflow: hidden;
        }
        .taiji .white{
            width: 400px;height: 200px;background-color: white;
            position: relative;
        }
        .taiji .whiteCircle{
            width: 200px;height: 200px;
            background-color: white;
            border-radius: 50%;
            position: absolute;right: 0;top: 100px;

            z-index: 1;
        }
        .taiji .whiteCircle .miniCircle{
            width: 50px;height: 50px;background-color: black;
            border-radius: 50%;
            position: absolute;
            right: 0;top:0 ;left: 0; bottom: 0;
            margin: auto;

        }
        .taiji .black{
            width: 400px;height: 200px;
            background-color: black;
            position: relative;
        }
        .taiji .blackCircle{
            width: 200px;height: 200px;background-color: black;
            border-radius: 50%;
            position: absolute;left: 0;top: -100px;
            z-index: 1;
        }
        .taiji .blackCircle .miniCircle{
            width: 50px;height: 50px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            right: 0;top:0 ;left: 0; bottom: 0;
            margin: auto;
        }

    </style>

动态太极

HTML代码与上方静态太极图一致

CSS代码

    <style>
        body{
            background-color: grey;
        }
        .taiji{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            overflow: hidden;
            margin: 30px auto;
            animation-name:running;
            animation-duration: 1.5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            
        }
        .taiji .white{
            width: 400px;height: 200px;background-color: white;
            position: relative;
        }
        .taiji .whiteCircle{
            width: 200px;height: 200px;
            background-color: white;
            border-radius: 50%;
            position: absolute;right: 0;top: 100px;

            z-index: 1;
        }
        .taiji .whiteCircle .miniCircle{
            width: 50px;height: 50px;background-color: black;
            border-radius: 50%;
            position: absolute;
            right: 0;top:0 ;left: 0; bottom: 0;
            margin: auto;

        }
        .taiji .black{
            width: 400px;height: 200px;
            background-color: black;
            position: relative;
        }
        .taiji .blackCircle{
            width: 200px;height: 200px;background-color: black;
            border-radius: 50%;
            position: absolute;left: 0;top: -100px;
            z-index: 1;
        }
        .taiji .blackCircle .miniCircle{
            width: 50px;height: 50px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            right: 0;top:0 ;left: 0; bottom: 0;
            margin: auto;
        }

        @keyframes running{
            from{transform:rotate(0deg)}
            to{transform:rotate(360deg)}
        }

    </style>