行星運行軌跡 純 css + html

<!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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 有時候購買的商品，屬性很多，想做成表格進行篩選。自然用技術(shù)宅的爬蟲方式做了 ```python # -*- ...
    超哥__閱讀 4,466評論 0贊 8
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,154評論 1贊 92
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    wzhiq896閱讀 2,119評論 0贊 2
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,438評論 0贊 11
  • 前段時間整理的一篇關(guān)于unity ui開發(fā)的文章，被推薦上了csdn首頁，對于剛剛寫文字的我來說，是莫大的鼓勵，讓...
    小飛不會飛_閱讀 5,466評論 0贊 4

友情鏈接更多精彩內(nèi)容