如何用html 写八卦

最新推荐文章于 2023-04-07 11:00:00 发布

张妮妮zwq

最新推荐文章于 2023-04-07 11:00:00 发布

阅读量943

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/zwq123w/article/details/78543858

版权

html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html,body{
            height:100%;
        }
        *{
            padding:0;
            margin:0;
        }
        body{
            background:cyan;
        }
        .box{
            height:400px;
            width:400px;
            background:linear-gradient(to left,white 50%,black 50%);
            border-radius:50%;
            animation:bg 4s linear infinite;
        }
        @keyframes bg{
            from{
                transform:rotateZ(0deg);
            }
            to{
                transform:rotateZ(360deg);
            }
        }
        .son1,.son2{
            height:200px;
            width:200px;
            margin:0 auto;
            border-radius:50%;
            overflow:hidden;
        }
        .son1{
            background:black;
        }
        .son2{
            background:white;
        }
        .test,.test2{
            height:100px;
            width:100px;
            background:radial-gradient(at 30px 30px,#878b8d,#b1b4b5);
            margin:50px auto;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son1">
            <div class="test"></div>
        </div>
        <div class="son2">
            <div class="test2"></div>
        </div>
    </div>
</body>
</html>

张妮妮zwq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用html 写八卦

<!DOCTYPE html><html><head> <title></title> <style type="text/css"> html,body{ height:100%; } *{ padding:0; margin:0; }
复制链接

扫一扫