H5+C3制作一个炫酷的太极图

我们如何使用H5+C3制作一个简易且炫酷的太极图呢

 

 代码部分：

 为了方便大家CV：

            *{
                margin: 0;padding: 0;
            }
            div{
                width: 400px;height: 400px;
                border: 1px solid #000;
                border-radius: 50%;
                margin: 50px auto;
                transition: 1s;
                background-image: 
    radial-gradient(circle at 50% 25%,#000 0px 20px,transparent 20px),
    radial-gradient(circle at 50% 75%,#fff 0px 20px,transparent 20px),
    radial-gradient(circle at 50% 25%,#fff 0px 100px,transparent 100px),
    radial-gradient(circle at 50% 75%,#000 0px 100px,transparent 100px),
    linear-gradient(to right,#fff 50%,#000 50%)
            }
            div:hover{
                /*当鼠标悬浮使太极图转起来*/
                transform:rotate(180deg);
            }