用css的变换绘制银河系

html部分:

<section class="galaxy">
    <ul class="orbit">
        <li class="mercury"><span> <span class="mer"></span></span></li>
        <li class="venus"><span></span></li>
        <li class="earth"><span><span class="moon"></span></span></li>
        <li class="mars"><span></span></span></li>
        <li class="asteroids"><span></span></li>
        <li class="jupiter"><span></span></li>
        <li class="saturn"><span><span class="ring"></span></span></li>
        <li class="uranus"><span></span></li>
        <li class="neptune"><span></span></li>
        <li class="pluto"><span></span></li>
    </ul>
</section>

先通过

1 transfrom变换将最外面的<li>标签做3D变换,有种躺下的感觉

2 <li>标签绘制轨道

3 假如不需要小星球动起来,和除了第一行的<li>标签以外的<li>标签即可

4 如果需要动起来

    父<span>标签用于绘制围绕的中心,也就是太阳

    子<span>用于绘制小星球,设置好宽度,围绕着太阳转

下面是css代码:

 body {
            background-color:black;
        }

        ul {
            list-style: none;
            position: relative;
        }

        li {
            border-radius: 100%;
            position: absolute;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name: orbit-path;
            transform-style: preserve-3d;

        }
        li span {
            border-radius: 100%;
            position: absolute;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name: moon;
            -webkit-animation-name: start1;

        }


        @-webkit-keyframes orbit-path {
            from { transform: rotateX(60deg) translateZ(60px)}
            to { transform: rotateX(60deg) translateZ(60px)}
        }
        @-webkit-keyframes moon {
            from { -webkit-transform:rotate(0deg);}
            to { -webkit-transform:rotate(0deg); }
        }
        @-webkit-keyframes start1{
                from{
                    -webkit-transform:rotate(0deg)
                }
                to{-webkit-transform:rotate(360deg)}

        }
        ul.orbit li.mercury {-webkit-animation-duration:5s;}
        ul.orbit li.mercury span{-webkit-animation-duration:5s;}
        ul.orbit li.venus {-webkit-animation-duration:8s;}
        ul.orbit li.earth {-webkit-animation-duration:12s;}
        ul.orbit li.earth span {-webkit-animation-duration:2s;}
        ul.orbit li.mars {-webkit-animation-duration:20s;}
        ul.orbit li.asteroids_meteorids {-webkit-animation-duration:50s;}
        ul.orbit li.jupiter {-webkit-animation-duration:30s;}
        ul.orbit li.saturn {-webkit-animation-duration:60s;}
        ul.orbit li.uranus {-webkit-animation-duration:70s;}
        ul.orbit li.neptune {-webkit-animation-duration:100s;}
        ul.orbit li.pluto {-webkit-animation-duration:120s;}
        .pluto {
            border: 1px solid #394057;
            height: 584px;
            width: 584px;
        }

        .neptune {
            border: 1px solid #394057;
            height: 524px;
            width: 524px;
            top: 30px;
            left: 70px;
        }
        .uranus {
            border: 1px solid #394057;
            height: 464px;
            width: 464px;
            top: 60px;
            left: 100px;
        }
        .saturn {
            border: 1px solid #394057;
            height: 404px;
            width: 404px;
            top: 90px;
            left: 130px;
        }
        .jupiter {
            border: 1px solid #394057;
            height: 344px;
            width: 344px;
            top: 120px;
            left: 160px;
        }

        .asteroids {
            border: 1px #394057;
            height: 330px;
            width: 330px;
            top: 130px;
            left: 170px;
        }
        .mars {
            border: 1px solid #394057;
            height: 284px;
            width: 284px;
            top: 150px;
            left: 190px;
        }

        .earth {
            border: 1px solid #394057;
            height: 224px;
            width: 224px;
            top: 180px;
            left: 220px;
        }
        .venus {
            border: 1px solid #394057;
            height: 164px;
            width: 164px;
            top: 210px;
            left: 250px;
        }

        .mercury {
            border: 1px solid #394057;
            height: 104px;
            width: 104px;
            top: 240px;
            left: 280px;
        }


        /* planets styles */

        .pluto > span {
            background-color: #7c6a5c;
            height: 10px;
            width: 10px;
            top: 79px;
            left: 79px;
        }
        .neptune > span {
            background-color: #77c2ec;
            height: 10px;
            width: 10px;
            top: 0px;
            left: 200px;
        }

        .uranus > span {
            background-color: #82b3d1;
            height: 10px;
            width: 10px;
            top: 6px;
            left: 300px;
        }
        .ring {
            height: 12px;
            width: 12px;
            left: -3px;
            top: -3px;
            border: 2px solid #5a4e34;
           transform: skewY(50deg);
            border-radius: 8px;
        }

        .saturn > span {
            background-color: #dfd3a9;
            height: 10px;
            width: 10px;
            top: 24px;
            left: 300px;
        }
        .jupiter > span {
            background-color: #e0ae6f;
            height: 10px;
            width: 10px;
            top: 67px;
            left: 24px;
        }

        .mars > span {
            background-color: #aa4200;
            height: 10px;
            width: 10px;
            top: 0px;
            left: 175px;
            -webkit-animation-name: start1;
        }
        span.moon {
            background-color: #ccc;
            top: 12px;
            left: 12px;
            width: 4px;
            height: 4px;

        }

        .earth > span {
            background-color: #06c;
            top: 56px;
            left: 5px;
            width: 10px;
            height: 10px;
        }

        .venus > span {
            background-color: #bf8639;
            top: 118px;
            left: 5px;
            width: 10px;
            height: 10px;
        }
       span.mer{
            background-color: #b6bac5;
            top: 55px;
            left: 55px;
            width: 10px;
            height: 10px;
        }
        .mercury > span{
            background-color: red;
            top:30px;
            left: 30px;
            width: 50px;
            height: 50px;
            box-shadow:0px 0px 20px yellow;
        }

最终效果图: