css 太极图案

2020-01-09 22:02:40 作者：互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .main{
                position: relative;
                width: 0px;
                height: 200px;
                margin: 50px auto;
                background-color: #00FFFF;
                border-left: 100px solid black;
                border-right: 100px solid white;
                box-shadow: 0 0 50px rgba(0,0,0,0.5);
                border-radius: 50%;
            }
            @keyframes rot{
                0%{transform: rotate(0deg);}
                100%{transform: rotate(360deg);}
            }
            .main:hover{
                animation: rot 0.6s linear infinite;
            }
            .main:before{
                content: "";
                position: absolute;
                left: -50px;
                top: 0px;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                box-shadow: 0 100px 0 black;
                background-color: white;
            }
            .main:after{
                content: "";
                position: absolute;
                left: -25px;
                top: 20px;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                box-shadow: 0 100px 0 white;
                background-color: black;
            }
        </style>
    </head>
    <body>
        <div class="main">
        
        </div>
    </body>
</html>

效果图：

为.main这个div加上hover伪类，有旋转动画。

标签：color,50px,100px,height,图案,main,border,太极,css
来源： https://www.cnblogs.com/Tisou1/p/12173717.html