当前位置：Gxlcms > css > css模拟行星

css模拟行星

时间：2021-07-01 10:21:17 帮助过：86人阅读

这篇文章介绍的内容是css模拟行星 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

  1. <html><head>
  2.     <style>
  3.         .solarsys{           
  4.          width: 800px;            
  5.          height: 800px;;
  6.             position: relative;           
  7.              margin: 0 auto;            
  8.              background-color: #000000;            
  9.              padding: 0;            
  10.              transform: scale(1);       
  11.               }
  12.         /*太阳*/
  13.         .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;        }
  14.         /*水星*/
  15.         .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;        }
  16.         /*水星轨道*/
  17.         .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;        }
  18.         /*金星*/
  19.         .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;        }
  20.         /*金星轨道*/
  21.         .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;*/
  22.             /*transform-origin: -75px -75px;*/
  23.             /*animation: rotate 4s infinite linear;*/
  24.             margin: 0px;            padding: 0px;        }
  25.         /*地球*/
  26.         .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;        }
  27.         /*地球轨道*/
  28.         .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;*/
  29.             /*transform-origin: -75px -75px;*/
  30.             /*animation: rotate 4s infinite linear;*/
  31.             margin: 0px;            padding: 0px;        }
  32.         /*火星*/
  33.         .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;        }
  34.          /*火星轨道*/
  35.         .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;*/
  36.             /*transform-origin: -75px -75px;*/
  37.             /*animation: rotate 4s infinite linear;*/
  38.             margin: 0px;            padding: 0px;        }
  39.         /*木星*/
  40.         .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;        }
  41.         /*木星轨道*/
  42.         .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;*/
  43.             /*transform-origin: -75px -75px;*/
  44.             /*animation: rotate 4s infinite linear;*/
  45.             margin: 0px;            padding: 0px;        }
  46.         /*土星*/
  47.         .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;        }
  48.         /*土星轨道*/
  49.         .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;*/
  50.             /*transform-origin: -75px -75px;*/
  51.             /*animation: rotate 4s infinite linear;*/
  52.             margin: 0px;            padding: 0px;        }
  53.         /*天王星*/
  54.         .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;        }
  55.         /*天王星轨道*/
  56.         .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;*/
  57.             /*transform-origin: -75px -75px;*/
  58.             /*animation: rotate 4s infinite linear;*/
  59.             margin: 0px;            padding: 0px;        }
  60.         /*海王星*/
  61.         .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;        }
  62.         /*海王星轨道*/
  63.         .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;*/
  64.             /*transform-origin: -75px -75px;*/
  65.             /*animation: rotate 4s infinite linear;*/
  66.             margin: 0px;            padding: 0px;        }
  67.         @keyframes rotate {
  68.             100% {                transform: rotate(-360deg);            }
  69.         }    </style></head><body>
  70.     <p class="solarsys">
  71.         <!--太阳-->
  72.         <p class='sun'></p>
  73.         <!--水星轨道-->
  74.         <p class='mercuryOrbit'></p>
  75.         <!--水星-->
  76.         <p class='mercury'></p>
  77.         <!--金星轨道-->
  78.         <p class='venusOrbit'></p>
  79.         <!--金星-->
  80.         <p class='venus'></p>
  81.         <!--地球轨道-->
  82.         <p class='earthOrbit'></p>
  83.         <!--地球-->
  84.         <p class='earth'></p>
  85.         <!--火星轨道-->
  86.         <p class='marsOrbit'></p>
  87.         <!--火星-->
  88.         <p class='mars'></p>
  89.         <!--木星轨道-->
  90.         <p class='jupiterOrbit'></p>
  91.         <!--木星-->
  92.         <p class='jupiter'></p>
  93.         <!--土星轨道-->
  94.         <p class='saturnOrbit'></p>
  95.         <!--土星-->
  96.         <p class='saturn'></p>
  97.         <!--天王星轨道-->
  98.         <p class='uranusOrbit'></p>
  99.         <!--天王星-->
  100.         <p class='uranus'></p>
  101.         <!--海王星轨道-->
  102.         <p class='neptuneOrbit'></p>
  103.         <!--海王星-->
  104.         <p class='neptune'></p>
  105.     </p></body></html>


http://www.cnblogs.com/kongxianghai/p/5568893.html

以上就是css模拟行星 的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！