Css 实现八卦

最新推荐文章于 2024-07-13 16:35:29 发布

chudai6963

最新推荐文章于 2024-07-13 16:35:29 发布

阅读量133

点赞数

原文链接：https://my.oschina.net/phpweishunlong/blog/889735

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>八卦</title>
    <style>
        #box{
            width:200px;
            height:400px;
            border-left:200px solid red;
            background:black;
            border-radius:50%;
            /*设置过渡*/
            transition:all 10s ease-in;
        }

        #box:hover{
            transform:rotate(7200deg);
        }

        .son{
            width:200px;
            height:200px;
            border-radius:50%;
            background:red;

            position:relative;
            right:100px;
            overflow:hidden;
        }
        .sun{
            width:50px;
            height:50px;
            background:red;

            position:relative;
            top:50%;
            left:50%;
            margin-left:-25px;
            margin-top:-25px;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="son">
            <div class="sun" style="background:black"></div>
        </div>
        <div class="son" style="background:black">
            <div class="sun"></div>
        </div>
    </div>
</body>
</html>

转载于:https://my.oschina.net/phpweishunlong/blog/889735