.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); } }
更新时间:2020-12-20 00:04:12