行星运行轨迹 纯 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
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 京东购物爬虫
    有时候购买的商品，属性很多，想做成表格进行筛选。自然用技术宅的爬虫方式做了 ```python # -*- ...
    超哥__阅读 9,816评论 0赞 8
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1赞 92
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 5,921评论 0赞 2
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 6,865评论 0赞 11
  • Unity NGUI屏幕适配
    前段时间整理的一篇关于unity ui开发的文章，被推荐上了csdn首页，对于刚刚写文字的我来说，是莫大的鼓励，让...
    小飞不会飞_阅读 10,709评论 0赞 4

友情链接更多精彩内容