Taiji Drawing

Taiji Drawing

img

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>TaiChi</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body {
                background-color:skyblue;
            }
            div{
                width:200px;
                height:400px;
                background-color:#fff;
                
                border-left:200px solid #000000;
                
                margin:50px auto;
                
                border-radius:50%;
                
                transition:all .6s ease-in-out;
            }
            div::before,div::after{
                content:"";
                display:block;
                width:50px;
                height:50px;
                border-radius:50%;
                
                margin-left:-100px;
            }
            
            div::before{
                background:#fff;
                border:75px solid #000000;
            }
            
            div::after{
                background:#000;
                border:75px solid #fff;
            }
            
            div:hover{
                transform:rotate(360deg);
            }
        </style>
            
    <body>
        <div class="123">
            
        </div>
    </body>
</html>

Guess you like

Origin www.cnblogs.com/SSPOFA/p/12038922.html