小案例：两极反转（旋转的太极）纯css_两极反转公式代码-CSDN博客

本文链接：https://blog.csdn.net/jumubai/article/details/121250428

写在body里面的代码

<body>
    <div class="box">
        <div class="box1">
            <div class="yuan1">
                <div class="xiaoy1">

                </div>
            </div>
        </div>
        <div class="box2">
            <div class="yuan2">
                <div class="xiaoy2">

                </div>
            </div>
        </div>
    </div>
</body>

样式

    <style>
    //最大的圆
        .box {
            height: 400px;
            width: 400px;
            margin: auto auto;
            border: 1px solid black;
            position: relative;
            border-radius: 50%;
            overflow: hidden;
            animation:move 8s linear infinite;
        }
        /*加上动画就能这个太极旋转了*/
        @keyframes move{
			from{
				transform:rotate(0deg);
			}
			to{
				transform:rotate(360deg);
			}
		}

		//里面的左右半圆的公共样式
        .box1,.box2{
            height: 400px;
            width: 200px;
            position: absolute;
        }
        .box1{
            background-color: rgb(0, 0, 0);
            margin-right: 50%;
        }
        .box2 {
            background-color: rgb(255, 255, 255);
            margin-left: 50%;
        }

		
    </style>

蒋整个圆分成黑白对半的圆，如下图
在这里插入图片描述

<style>
	        //太极最圆的部分的小圆
        .yuan1,.yuan2{
            height: 200px;
            z-index: 889;
            width: 200px;
            position: absolute;
            border-radius: 50%;
        }
        .yuan1 {
            background-color: rgb(0, 0, 0);
            margin-left: 50%;
        }
        .yuan2 {
            background-color: rgb(255, 255, 255);
            margin-left: -50%;
            margin-top: 100%;
        }
</style>

如下图：在这里插入图片描述
把小圆的颜色改成对应的颜色，如下图：

<style>
	//里面完整小圆的公共样式
        .xiaoy1,.xiaoy2{
            width: 50px;
            height: 50px;
            position: absolute;
            border-radius: 50%;
            margin-left: 33%;
            margin-top: 33%;
        }
        .xiaoy1 {
            background-color: rgb(255, 255, 255);
        }
        .xiaoy2 {
            background-color: rgb(0, 0, 0);  
        }
</style>