行星运行轨迹纯 css + html

作者: 酷酷的小k | 来源:发表于2019-04-04 18:15 被阅读0次

行星运行轨迹纯 css + html
小结
练习题—新闻列表
京东登录页面
纯CSS实现banner连续轮播效果
行星轨迹
web前端特效演示合集
day4-京东登陆
纯css实现的三级水平导航菜单
Thymeleaf 学习

<!DOCTYPE html>

<html>
    <head>
        <title>行星运行轨迹</title>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                position: relative;
                background-color: #000000;
            }

            .sunlight {
                width: 90px;
                height: 90px;
                border-radius: 50%;
                top: 265px;
                left: 638px;
                background-color: #F88B3A;
                box-shadow: 0 0 15px #F88B3A;
                position: absolute;
            }

            .mercury-track {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                top: 259px;
                left: 632px;
                border: 1px dashed #848484;
                position: absolute;
            }

            .mercury {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                top: 310px;
                left: 628px;
                background-color: #4a5dc5;
                position: absolute;

                transform-origin: 56px 0;
                -webkit-transform-origin: 56px 0;
                -moz-transform-origin: 56px 0;
                -ms-transform-origin: 56px 0;
                -o-transform-origin: 56px 0;

                animation: negative-rotate 20s linear infinite;
                -webkit-animation: negative-rotate 20s linear infinite;
                -moz-animation: negative-rotate 20s linear infinite;
                -o-animation: negative-rotate 20s linear infinite;
            }

            .venus-track {
                width: 128px;
                height: 128px;
                border-radius: 50%;
                top: 245px;
                left: 618px;
                border: 1px dashed #848484;
                position: absolute;
            }

            .venus {
                width: 14px;
                height: 14px;
                border-radius: 50%;
                top: 310px;
                left: 612px;
                background-color: #e45336;
                position: absolute;

                transform-origin: 71px 0;
                -webkit-transform-origin: 71px 0;
                -moz-transform-origin: 71px 0;
                -ms-transform-origin: 71px 0;
                -o-transform-origin: 71px 0;

                animation: positive-rotate 22s linear infinite;
                -webkit-animation: positive-rotate 22s linear infinite;
                -moz-animation: positive-rotate 22s linear infinite;
                -o-animation: positive-rotate 22s linear infinite;
            }

            .earth-track {
                width: 170px;
                height: 170px;
                border-radius: 50%;
                top: 223px;
                left: 597px;
                border: 1px dashed #848484;
                position: absolute;
            }

            .earth {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                top: 310px;
                left: 588px;
                background-color: #687ad2;
                position: absolute;

                transform-origin: 95px 0;
                -webkit-transform-origin: 95px 0;
                -moz-transform-origin: 95px 0;
                -ms-transform-origin: 95px 0;
                -o-transform-origin: 95px 0;

                animation: negative-rotate 15s linear infinite;
                -webkit-animation: negative-rotate 15s linear infinite;
                -moz-animation: negative-rotate 15s linear infinite;
                -o-animation: negative-rotate 15s linear infinite;
            }

            .mars-track {
                width: 220px;
                height: 220px;
                border-radius: 50%;
                top: 198px;
                left: 572px;
                border: 1px dashed #848484;
                position: absolute;
            }

            .mars {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                top: 310px;
                left: 564px;
                background-color: #bb502d;
                position: absolute;

                transform-origin: 119px 0;
                -webkit-transform-origin: 119px 0;
                -moz-transform-origin: 119px 0;
                -ms-transform-origin: 119px 0;
                -o-transform-origin: 119px 0;

                animation: negative-rotate 18s linear infinite;
                -webkit-animation: negative-rotate 18s linear infinite;
                -moz-animation: negative-rotate 18s linear infinite;
                -o-animation: negative-rotate 18s linear infinite;
            }

            .jupiter-track {
                width: 290px;
                height: 290px;
                border-radius: 50%;
                top: 162px;
                left: 537px;
                border: 1px dashed #848484;
                position: absolute;
            }

            .jupiter {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                top: 310px;
                left: 522px;
                background-color: #e6ba35;
                position: absolute;

                transform-origin: 161px 0;
                -webkit-transform-origin: 161px 0;
                -moz-transform-origin: 161px 0;
                -ms-transform-origin: 161px 0;
                -o-transform-origin: 161px 0;

                animation: negative-rotate 5s linear infinite;
                -webkit-animation: negative-rotate 5s linear infinite;
                -moz-animation: negative-rotate 5s linear infinite;
                -o-animation: negative-rotate 5s linear infinite;
            }

            .saturn-track {
                width: 380px;
                height: 380px;
                border-radius: 50%;
                top: 116px;
                left: 492px;
                border: 1px dashed #848484;
                position: absolute;
            }

            .saturn {
                width: 34px;
                height: 34px;
                border-radius: 50%;
                top: 310px;
                left: 476px;
                background-color: #e4cf8c;
                position: absolute;

                transform-origin: 206px 0;
                -webkit-transform-origin: 206px 0;
                -moz-transform-origin: 206px 0;
                -ms-transform-origin: 206px 0;
                -o-transform-origin: 206px 0;

                animation: negative-rotate 8s linear infinite;
                -webkit-animation: negative-rotate 8s linear infinite;
                -moz-animation: negative-rotate 8s linear infinite;
                -o-animation: negative-rotate 8s linear infinite;
            }

            .uranus-track {
                width: 462px;
                height: 462px;
                border-radius: 50%;
                top: 75px;
                left: 451px;
                border: 1px dashed #848484;
                position: absolute;
            }

            .uranus {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                top: 310px;
                left: 438px;
                background-color: #51b0dc;
                position: absolute;

                transform-origin: 244px 0;
                -webkit-transform-origin: 244px 0;
                -moz-transform-origin: 244px 0;
                -ms-transform-origin: 244px 0;
                -o-transform-origin: 244px 0;

                animation: positive-rotate 10s linear infinite;
                -webkit-animation: positive-rotate 10s linear infinite;
                -moz-animation: positive-rotate 10s linear infinite;
                -o-animation: positive-rotate 10s linear infinite;
            }

            .neptune-track {
                width: 546px;
                height: 546px;
                border-radius: 50%;
                top: 33px;
                left: 408px;
                border: 1px dashed #848484;
                position: absolute;
            }

            .neptune {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                top: 310px;
                left: 394px;
                background-color: #596bd4;
                position: absolute;

                transform-origin: 288px 0;
                -webkit-transform-origin: 288px 0;
                -moz-transform-origin: 288px 0;
                -ms-transform-origin: 288px 0;
                -o-transform-origin: 288px 0;

                animation: negative-rotate 13s linear infinite;
                -webkit-animation: negative-rotate 13s linear infinite;
                -moz-animation: negative-rotate 13s linear infinite;
                -o-animation: negative-rotate 13s linear infinite;
            }

            @keyframes positive-rotate {
                100% {
                    transform: rotate(360deg);
                    -webkit-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
                }
            }

            @-webkit-keyframes positive-rotate {
                100% {
                    transform: rotate(360deg);
                    -webkit-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
                }
            }

            @-moz-keyframes positive-rotate {
                100% {
                    transform: rotate(360deg);
                    -webkit-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
                }
            }

            @-ms-keyframes positive-rotate {
                100% {
                    transform: rotate(360deg);
                    -webkit-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
                }
            }

            @-o-keyframes positive-rotate {
                100% {
                    transform: rotate(360deg);
                    -webkit-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
                }
            }

            @keyframes negative-rotate {
                100% {
                    transform: rotate(-360deg);
                    -webkit-transform: rotate(-360deg);
                    -moz-transform: rotate(-360deg);
                    -ms-transform: rotate(-360deg);
                    -o-transform: rotate(-360deg);
                }
            }

            @-webkit-keyframes negative-rotate {
                100% {
                    transform: rotate(-360deg);
                    -webkit-transform: rotate(-360deg);
                    -moz-transform: rotate(-360deg);
                    -ms-transform: rotate(-360deg);
                    -o-transform: rotate(-360deg);
                }
            }

            @-moz-keyframes negative-rotate {
                100% {
                    transform: rotate(-360deg);
                    -webkit-transform: rotate(-360deg);
                    -moz-transform: rotate(-360deg);
                    -ms-transform: rotate(-360deg);
                    -o-transform: rotate(-360deg);
                }
            }

            @-ms-keyframes negative-rotate {
                100% {
                    transform: rotate(-360deg);
                    -webkit-transform: rotate(-360deg);
                    -moz-transform: rotate(-360deg);
                    -ms-transform: rotate(-360deg);
                    -o-transform: rotate(-360deg);
                }
            }

            @-o-keyframes negative-rotate {
                100% {
                    transform: rotate(-360deg);
                    -webkit-transform: rotate(-360deg);
                    -moz-transform: rotate(-360deg);
                    -ms-transform: rotate(-360deg);
                    -o-transform: rotate(-360deg);
                }
            }
        </style>
    </head>
    <body>
        <!--太阳-->
        <div class="sunlight"></div>
        <!--水星轨道-->
        <div class="mercury-track"></div>
        <!--水星-->
        <div class="mercury"></div>
        <!--金星轨道-->
        <div class="venus-track"></div>
        <!--金星-->
        <div class="venus"></div>
        <!--地球轨道-->
        <div class="earth-track"></div>
        <!--地球-->
        <div class="earth"></div>
        <!--火星轨道-->
        <div class="mars-track"></div>
        <!--火星-->
        <div class="mars"></div>
        <!--木星轨道-->
        <div class="jupiter-track"></div>
        <!--木星-->
        <div class="jupiter"></div>
        <!--土星轨道-->
        <div class="saturn-track"></div>
        <!--土星-->
        <div class="saturn"></div>
        <!--天王星轨道-->
        <div class="uranus-track"></div>
        <!--天王星-->
        <div class="uranus"></div>
        <!--海王星轨道-->
        <div class="neptune-track"></div>
        <!--海王星-->
        <div class="neptune"></div>
    </body>
</html>

没有做适配处理，默认以 1366 * 768 分辨率来写的样式，效果如下：

image.png