css3-旋转的太极图

123

body {
background-color: #aaa;
}

    .div {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        border: 1px solid #ddd;
        background-image:
            radial-gradient(50% 50% at 50% 25%, #000 10%, transparent 0),
            radial-gradient(50% 50% at 50% 75%, #fff 10%, transparent 0),
            radial-gradient(50% 50% at 50% 25%, #fff 50%, transparent 0), radial-gradient(50% 50% at 50% 75%, #000 50%, transparent 0),
            linear-gradient(to left, #fff 50%, #000 50%);
        animation: rotate 3s linear infinite;
    }

    @keyframes rotate {
        from {  transform: rotate(0deg) }
        to { transform: rotate(360deg)}
    }
</style>