Rumah > Artikel > hujung hadapan web > css模拟行星
css模拟行星

不言asal: 2018-04-21 15:44:141307semak imbas
这篇文章介绍的内容是css模拟行星，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
<html><head>

    <style>
        .solarsys{           
         width: 800px;            
         height: 800px;;
            position: relative;           
             margin: 0 auto;            
             background-color: #000000;            
             padding: 0;            
             transform: scale(1);       
              }


        /*太阳*/
        .sun {            left:357px;            top:357px;            height: 90px;            width: 90px;            background-color: rgb(248,107,35);            border-radius: 50%;            box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);            position: absolute;            margin: 0;        }


        /*水星*/
        .mercury {            left:337.5px;            top:395px;            height: 10px;            width: 10px;            background-color: rgb(166,138,56);            border-radius: 50%;            position: absolute;            transform-origin: 62.5px 5px;            animation: rotate 1.5s infinite linear;        }


        /*水星轨道*/
        .mercuryOrbit {            left:342.5px;            top:342.5px;            height: 115px;            width: 115px;            background-color: transparent;            border-radius: 50%;            border-style: dashed;            border-color: gray;            position: absolute;            border-width: 1px;            margin: 0px;            padding: 0px;        }


        /*金星*/
        .venus {            left:309px;            top:389px;            height: 22px;            width: 22px;            background-color: rgb(246,157,97);            border-radius: 50%;            position: absolute;            transform-origin: 91px 11px;            animation: rotate 3.84s infinite linear;        }


        /*金星轨道*/
        .venusOrbit {            left:320px;            top:320px;            height: 160px;            width: 160px;            background-color: transparent;            border-radius: 50%;            border-style: dashed;            border-color: gray;            position: absolute;            border-width: 1px;            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;            padding: 0px;        }


        /*地球*/
        .earth {            left:266.5px;            top:391px;            height: 18px;            width: 18px;            background-color: rgb(115,114,174);            border-radius: 50%;            position: absolute;            transform-origin: 134px 9px;            animation: rotate 6.25s infinite linear;        }


        /*地球轨道*/
        .earthOrbit {            left:275px;            top:275px;            height: 250px;            width: 250px;            background-color: transparent;            border-radius: 50%;            border-style: dashed;            border-color: gray;            position: absolute;            border-width: 1px;            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;            padding: 0px;        }


        /*火星*/
        .mars {            left:222.5px;            top:392.5px;            height: 15px;            width: 15px;            background-color: rgb(140,119,63);            border-radius: 50%;            position: absolute;            transform-origin: 177.5px 7.5px;            animation: rotate 11.75s infinite linear;        }


         /*火星轨道*/
        .marsOrbit {            left:230px;            top:230px;            height: 340px;            width: 340px;            background-color: transparent;            border-radius: 50%;            border-style: dashed;            border-color: gray;            position: absolute;            border-width: 1px;            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;            padding: 0px;        }


        /*木星*/
        .jupiter {            left:134px;            top:379px;            height: 42px;            width: 42px;            background-color: rgb(156,164,143);            border-radius: 50%;            position: absolute;            transform-origin: 266px 21px;            animation: rotate 74.04s infinite linear;        }


        /*木星轨道*/
        .jupiterOrbit {            left:155px;            top:155px;            height: 490px;            width: 490px;            background-color: transparent;            border-radius: 50%;            border-style: dashed;            border-color: gray;            position: absolute;            border-width: 1px;            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;            padding: 0px;        }


        /*土星*/
        .saturn {            left:92px;            top:387px;            height: 26px;            width: 26px;            background-color: rgb(215,171,68);            border-radius: 50%;            position: absolute;            transform-origin: 308px 13px;            animation: rotate 183.92s infinite linear;        }


        /*土星轨道*/
        .saturnOrbit {            left:105px;            top:105px;            height: 590px;            width: 590px;            background-color: transparent;            border-radius: 50%;            border-style: dashed;            border-color: gray;            position: absolute;            border-width: 1px;            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;            padding: 0px;        }


        /*天王星*/
        .uranus {            left:41.5px;            top:386.5px;            height: 27px;            width: 27px;            background-color: rgb(164,192,206);            border-radius: 50%;            position: absolute;            transform-origin: 358.5px 13.5px;            animation: rotate 524.46s infinite linear;        }


        /*天王星轨道*/
        .uranusOrbit {            left:55px;            top:55px;            height: 690px;            width: 690px;            background-color: transparent;            border-radius: 50%;            border-style: dashed;            border-color: gray;            position: absolute;            border-width: 1px;            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;            padding: 0px;        }


        /*海王星*/
        .neptune {            left:10px;            top:390px;            height: 20px;            width: 20px;            background-color: rgb(133,136,180);            border-radius: 50%;            position: absolute;            transform-origin: 390px 10px;            animation: rotate 1028.76s infinite linear;        }


        /*海王星轨道*/
        .neptuneOrbit {            left:20px;            top:20px;            height: 760px;            width: 760px;            background-color: transparent;            border-radius: 50%;            border-style: dashed;            border-color: gray;            position: absolute;            border-width: 1px;            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;            padding: 0px;        }


        @keyframes rotate {
            100% {                transform: rotate(-360deg);            }
        }    </style></head><body>
    <p class="solarsys">
        <!--太阳-->
        <p class=&#39;sun&#39;></p>


        <!--水星轨道-->
        <p class=&#39;mercuryOrbit&#39;></p>


        <!--水星-->
        <p class=&#39;mercury&#39;></p>


        <!--金星轨道-->
        <p class=&#39;venusOrbit&#39;></p>


        <!--金星-->
        <p class=&#39;venus&#39;></p>


        <!--地球轨道-->
        <p class=&#39;earthOrbit&#39;></p>


        <!--地球-->
        <p class=&#39;earth&#39;></p>


        <!--火星轨道-->
        <p class=&#39;marsOrbit&#39;></p>


        <!--火星-->
        <p class=&#39;mars&#39;></p>


        <!--木星轨道-->
        <p class=&#39;jupiterOrbit&#39;></p>


        <!--木星-->
        <p class=&#39;jupiter&#39;></p>


        <!--土星轨道-->
        <p class=&#39;saturnOrbit&#39;></p>


        <!--土星-->
        <p class=&#39;saturn&#39;></p>


        <!--天王星轨道-->
        <p class=&#39;uranusOrbit&#39;></p>


        <!--天王星-->
        <p class=&#39;uranus&#39;></p>


        <!--海王星轨道-->
        <p class=&#39;neptuneOrbit&#39;></p>


        <!--海王星-->
        <p class=&#39;neptune&#39;></p>
    </p></body></html>
http://www.cnblogs.com/kongxianghai/p/5568893.html
Atas ialah kandungan terperinci css模拟行星 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于CSS页面布局的方案大全Artikel seterusnya：CSS简单学习的要点
Artikel berkaitan

Lihat lagi