旋转的八卦图，纯CSS实现

欢迎来到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);
            }
        }

HTML代码：

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

详解：css主要运用了伪元素：after和：before,和css3的变形transform：rotate旋转，和动画animation，具体知识点可百度3WC了解，初级版本是这样，还可以玩的很花，大家可以自行修改动画样式，谢谢阅读