美文网首页
行星运行轨迹 纯 css + html

行星运行轨迹 纯 css + html

作者: 酷酷的小k | 来源:发表于2019-04-04 18:15 被阅读0次
    <!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

    相关文章

      网友评论

          本文标题：行星运行轨迹 纯 css + html

          本文链接：https://www.haomeiwen.com/subject/gdbqiqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|行星运行轨迹 纯 css + html|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！