css模拟行星
程序员文章站
2022-04-13 10:52:37
...
这篇文章介绍的内容是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='sun'></p>
<!--水星轨道-->
<p class='mercuryOrbit'></p>
<!--水星-->
<p class='mercury'></p>
<!--金星轨道-->
<p class='venusOrbit'></p>
<!--金星-->
<p class='venus'></p>
<!--地球轨道-->
<p class='earthOrbit'></p>
<!--地球-->
<p class='earth'></p>
<!--火星轨道-->
<p class='marsOrbit'></p>
<!--火星-->
<p class='mars'></p>
<!--木星轨道-->
<p class='jupiterOrbit'></p>
<!--木星-->
<p class='jupiter'></p>
<!--土星轨道-->
<p class='saturnOrbit'></p>
<!--土星-->
<p class='saturn'></p>
<!--天王星轨道-->
<p class='uranusOrbit'></p>
<!--天王星-->
<p class='uranus'></p>
<!--海王星轨道-->
<p class='neptuneOrbit'></p>
<!--海王星-->
<p class='neptune'></p>
</p></body></html>
http://www.cnblogs.com/kongxianghai/p/5568893.html
以上就是css模拟行星 的详细内容，更多请关注其它相关文章！