地球绕着太阳转的小动画

hq111111111

于 2022-01-13 17:59:23 发布

阅读量308

点赞数

文章标签： css3 javascript

本文链接：https://blog.csdn.net/sinat_34605342/article/details/122479502

版权

效果

在这里插入图片描述

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .main {
        width: 512px;
        height: 512px;
        position: relative;
    }
    #sun {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    #earth {
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<body>
    <div class="main">
        <div id="sun">🌞</div>
        <div id="earth">🌏</div>
    </div>
    <script>
        var earth = document.getElementById("earth");
        const x0 = 512 / 2, y0 = 512 / 2;
        const radius = 200;
        const cycle = 5000;
        function update(t) {
            const alpha = 2 * Math.PI * t / cycle;
            var x = x0 + radius * Math.cos(alpha)
            var y = y0 + radius * Math.sin(alpha)
            earth.style.left = x + "px";
            earth.style.top = y + "px";
            requestAnimationFrame(update)
        }
        update(0)
    </script>
</body>

</html>