歡迎來到Altaba的部落格

不廢話，直接上原始碼，旋轉八卦圖的核心在於CSS程式碼的編寫，所有首先呈上CSS程式碼：

	.yang-yin2{
            width: 198px;
            height: 396px;
            border: solid black;
            border-width: 2px 200px 2px 2px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            animation: gun 2s linear infinite;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .yang-yin2:before{
            content: " ";
            position: absolute;
            width: 28px;
            height: 28px;
            background-color: black;
            border: 85px #ffffff solid;
            border-radius: 50%;
            top: 0;
            left: 50%;
        }
        .yang-yin2:after{
            content: " ";
            position: absolute;
            width: 28px;
            height: 28px;
            background-color: #ffffff;
            border: 85px black solid;
            border-radius: 50%;
            top: 50%;
            left: 50%;
        }
 

	@keyframes gun {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }

<div class="yang-yin2"></div>