一个DIV绘制阴阳鱼 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>阴阳鱼</title>
        <style>

            .taiji{
                width: 0;
                height: 400px;
                border-radius: 50%;
                border-left: 200px black solid;
                border-right: 200px white solid;
                box-shadow: 0 0 0 2px #000000;
                animation: rotations 100s infinite linear;
            }
            .taiji::before{
                content: "";
                display: block;
                width: 60px;
                height: 60px;
                margin-left: -100px;
                border: 70px solid black;
                border-radius: 50%;
                background-color: white;
            }
            .taiji::after{
                content: "";
                width: 60px;
                height: 60px;
                margin-left: -100px;
                display: block;
                border: 70px solid white;
                border-radius: 50%;
                background-color:black;
            }
            
            @keyframes rotations{
                0%{
                    transform: rotate(0deg);
                }
                100%{
                    transform: rotate(10060deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="taiji"></div>
        </div>
    </body>
</html>

 

posted @ 2020-08-15 10:16  清尘莫风  阅读(247)  评论(0)    收藏  举报