首页 > 其他分享> > 前端之旋转太极图案例

前端之旋转太极图案例

2020-07-18 09:02:34 作者：互联网

最近在学前端的相关知识，里面有一个太极图的案例，感觉挺有意思的。自己完成后又加了点JS特效让太极图转起来。
可能有点low，但对于初学前端的我来说也是一个阶段性成就，于是决定在博客园的公告栏把这个旋转的太极图挂一段时间。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极图</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: lightgray;
        }

        #tjt {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            border: 1px black solid;
            position: relative;
            z-index: 100;
            margin: 100px auto;
        }

        #tjt>div {
            height: 50%;
            width: 100%;
        }

        #up {
            background-color: white;
            border-radius: 100% 100% 0 0 / 200% 200% 0 0;
        }

        #down {
            background-color: black;
            border-radius: 0 0 100% 100% / 0 0 200% 200%;
        }

        #up::before {
            content: "";
            display: block;
            background-color: black;
            box-sizing: border-box;
            height: 50%;
            width: 50%;
            position: absolute;
            left: 0;
            top: 25%;
            border: 33.3px white solid;
            border-radius: 50%;
        }

        #down::after {
            content: "";
            display: block;
            background-color: white;
            box-sizing: border-box;
            height: 50%;
            width: 50%;
            position: absolute;
            left: 50%;
            top: 25%;
            border: 33.3px black solid;
            border-radius: 50%;
        }
    </style>
    <script>
        window.onload = function () {
            setInterval(function () {
                let data = document.getElementById("tjt").style.transform;
                let deg = parseInt(data.slice(data.indexOf('(') + 1));
                document.getElementById("tjt").style.transform =
                    "rotate(" + (deg + -5) + "deg)";
                document.getElementById("tjt").style.transition = '0.1s linear'
            }
                , 100);
        }
    </script>
</head>

<body>
    <div id="tjt" style="transform: rotate(0deg);">
        <div id="up"></div>
        <div id="down"></div>
    </div>
</body>

</html>

好像用CSS做太极图在学校的时候老师也当案例讲过，不记得了

标签：太极图,前端,50%,案例,radius,tjt,background,border
来源： https://www.cnblogs.com/Angel-Demon/p/13334495.html