transition实现行星运转

最新推荐文章于 2022-04-16 14:58:30 发布
我又懂了
最新推荐文章于 2022-04-16 14:58:30 发布
阅读量127
点赞数
本文链接：https://blog.csdn.net/qq_39194067/article/details/103101030
版权
话不多说，刚代码
<!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>
    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;

        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(-360deg);
            }
        }

        .solarsys {
            width: 90%;
            height: 150%;
            background-color: #1f1e1e;
            margin: 0 auto;
            position: relative;
        }

        .solarsys div {

            border-radius: 50%;
            position: absolute;
        }

        .sun {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #f05121;
            box-shadow: 1px 1px 20px #f05121;
            position: absolute;
            top: calc(50% - 75px);
            left: calc(50% - 75px);
        }


        .mercuryOrbit {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 1px dotted #fff;
            top: calc(50% - 90px);
            left: calc(50% - 90px);
        }

        .mercury {
            width: 10px;
            height: 10px;
            background-color: #3513f7;
            top: calc(50% - 5px);
            left: calc(50% - 95px);
            /*  */
            transform-origin: 95px 5px;
            animation: rotate 2s linear infinite;
        }

        .venusOrbit {
            width: 240px;
            height: 240px;
            border-radius: 50%;
            border: 1px dotted #fff;
            top: calc(50% - 120px);
            left: calc(50% - 120px);
        }

        .venus {
            width: 20px;
            height: 20px;
            background-color: #ebca12;
            top: calc(50% - 10px);
            left: calc(50% - 130px);
            transform-origin: 130px 10px;
            animation: rotate 3s linear infinite;
        }

        .earthOrbit {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 1px dotted #fff;
            top: calc(50% - 150px);
            left: calc(50% - 150px);
        }

        .earth {
            width: 30px;
            height: 30px;
            background-color: blue;
            top: calc(50% - 15px);
            left: calc(50% - 165px);
            transform-origin: 165px 15px;
            animation: rotate 4s linear infinite;
        }

        .marsOrbit {
            width: 380px;
            height: 380px;
            border-radius: 50%;
            border: 1px dotted #fff;
            top: calc(50% - 190px);
            left: calc(50% - 190px);
        }

        .mars {
            width: 40px;
            height: 40px;
            background-color: yellow;
            top: calc(50% - 20px);
            left: calc(50% - 210px);
            transform-origin: 210px 20px;
            animation: rotate 4.5s linear infinite;
        }

        .jupiterOrbit {
            width: 480px;
            height: 480px;
            border-radius: 50%;
            border: 1px dotted #fff;
            top: calc(50% - 240px);
            left: calc(50% - 240px);
        }

        .jupiter {
            width: 50px;
            height: 50px;
            background-color: rgb(42, 216, 80);
            top: calc(50% - 25px);
            left: calc(50% - 265px);
            transform-origin: 265px 25px;
            animation: rotate 5.2s linear infinite;
        }

        .saturnOrbit {
            width: 600px;
            height: 600px;
            border-radius: 50%;
            border: 1px dotted #fff;
            top: calc(50% - 300px);
            left: calc(50% - 300px);
        }

        .saturn {
            width: 60px;
            height: 60px;
            background-color: rgb(22, 205, 238);
            top: calc(50% - 30px);
            left: calc(50% - 330px);
            transform-origin: 330px 30px;
            animation: rotate 6.8s linear infinite;
        }

        .uranusOrbit {
            width: 730px;
            height: 730px;
            border-radius: 50%;
            border: 1px dotted #fff;
            top: calc(50% - 365px);
            left: calc(50% - 365px);
        }

        .uranus {
            width: 68px;
            height: 68px;
            background-color: rgb(238, 22, 166);
            top: calc(50% - 34px);
            left: calc(50% - 399px);
            transform-origin: 399px 34px;
            animation: rotate 9s linear infinite;
        }

        .neptuneOrbit {
            width: 860px;
            height: 860px;
            border-radius: 50%;
            border: 1px dotted #fff;
            top: calc(50% - 430px);
            left: calc(50% - 430px);
        }

        .neptune {
            width: 70px;
            height: 70px;
            background-color: rgb(188, 22, 238);
            top: calc(50% - 35px);
            left: calc(50% - 465px);
            transform-origin: 465px 35px;
            animation: rotate 11s linear infinite;
        }
    </style>
</head>

<body>
    <div class="solarsys">
        <!--太阳-->
        <div class='sun'></div>

        <!--水星轨道-->
        <div class='mercuryOrbit'></div>

        <!--水星-->
        <div class='mercury'></div>

        <!--金星轨道-->
        <div class='venusOrbit'></div>

        <!--金星-->
        <div class='venus'></div>

        <!--地球轨道-->
        <div class='earthOrbit'></div>

        <!--地球-->
        <div class='earth'></div>

        <!--火星轨道-->
        <div class='marsOrbit'></div>

        <!--火星-->
        <div class='mars'></div>

        <!--木星轨道-->
        <div class='jupiterOrbit'></div>

        <!--木星-->
        <div class='jupiter'></div>

        <!--土星轨道-->
        <div class='saturnOrbit'></div>

        <!--土星-->
        <div class='saturn'></div>

        <!--天王星轨道-->
        <div class='uranusOrbit'></div>

        <!--天王星-->
        <div class='uranus'></div>

        <!--海王星轨道-->
        <div class='neptuneOrbit'></div>

        <!--海王星-->
        <div class='neptune'></div>
    </div>
</body>

</html>
<!-- 
    transform-origin:x y;   定义元素绕什么旋转
    绕圆心旋转时
    x表示 轨道半径加上球体半径
    y 表示球体半径
    绕轴旋转；

 -->