css3制作旋转的太极图

蓝咒 提交于 2019-11-29 09:42:08
<div class="div"></div>
    <style>
        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>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!