标签：八卦 100% 50% radius 连环 tr1 table border 太极

。。。中华有神功

HTML

<table cellpadding="0" cellspacing="0">
    <tr class="tr1">
        <td class="td1"><div class="div1"><p></p></div></td>
        <td class="td2"><div class="div2"><p></p></div></td>
    </tr>
    <tr class="tr2">
        <td class="td3"></td>
        <td class="td4"></td>
    </tr>
</table>

CSS

table{
    width: 4rem;
    height: 4rem;
    border: 0.02rem solid black;
    border-radius: 50%;    
    animation: rotate 10s infinite linear;
}
@keyframes rotate{
    0%{
                transform: rotate(0deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}
table .tr1{
    background: black;
}
table .tr1 .td1{
    border-top-left-radius: 100%;
    position: relative;
}
table .tr1 .td1 .div1{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: black;
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
table .tr1 .td1 .div1 p{
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: white;
}
table .tr1 .td2{
    border-top-right-radius: 100%;
    position: relative;
}
table .tr1 .td2 .div2{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: white;
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
table .tr1 .td2 .div2 p{
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: black;
}
table .tr2 .td3{
    border-bottom-left-radius: 100%;
}
table .tr2 .td4{
    border-bottom-right-radius: 100%;
}                

太极八卦，阴阳五行  ——  不停转

标签：八卦,100%,50%,radius,连环,tr1,table,border,太极
来源： https://www.cnblogs.com/Function-cnblogs/p/10991782.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。