html sun app,Sun.html

行星

.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);

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史