Heim > Artikel > Web-Frontend > CSS simulierter Planet

CSS simulierter Planet

不言Original: 2018-04-21 15:44:141301Durchsuche

Dieser Artikel stellt den CSS-simulierten Planeten vor, der einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf verweisen

<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

Das obige ist der detaillierte Inhalt vonCSS simulierter Planet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine Sammlung von Lösungen für das CSS-SeitenlayoutNächster Artikel：Eine Sammlung von Lösungen für das CSS-Seitenlayout

In Verbindung stehende Artikel

Mehr sehen