行星运行轨迹 纯 css + html
2019-04-04 本文已影响0人
酷酷的小k
<!DOCTYPE html>
<html>
<head>
<title>行星运行轨迹</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body {
margin: 0;
padding: 0;
position: relative;
background-color: #000000;
}
.sunlight {
width: 90px;
height: 90px;
border-radius: 50%;
top: 265px;
left: 638px;
background-color: #F88B3A;
box-shadow: 0 0 15px #F88B3A;
position: absolute;
}
.mercury-track {
width: 100px;
height: 100px;
border-radius: 50%;
top: 259px;
left: 632px;
border: 1px dashed #848484;
position: absolute;
}
.mercury {
width: 10px;
height: 10px;
border-radius: 50%;
top: 310px;
left: 628px;
background-color: #4a5dc5;
position: absolute;
transform-origin: 56px 0;
-webkit-transform-origin: 56px 0;
-moz-transform-origin: 56px 0;
-ms-transform-origin: 56px 0;
-o-transform-origin: 56px 0;
animation: negative-rotate 20s linear infinite;
-webkit-animation: negative-rotate 20s linear infinite;
-moz-animation: negative-rotate 20s linear infinite;
-o-animation: negative-rotate 20s linear infinite;
}
.venus-track {
width: 128px;
height: 128px;
border-radius: 50%;
top: 245px;
left: 618px;
border: 1px dashed #848484;
position: absolute;
}
.venus {
width: 14px;
height: 14px;
border-radius: 50%;
top: 310px;
left: 612px;
background-color: #e45336;
position: absolute;
transform-origin: 71px 0;
-webkit-transform-origin: 71px 0;
-moz-transform-origin: 71px 0;
-ms-transform-origin: 71px 0;
-o-transform-origin: 71px 0;
animation: positive-rotate 22s linear infinite;
-webkit-animation: positive-rotate 22s linear infinite;
-moz-animation: positive-rotate 22s linear infinite;
-o-animation: positive-rotate 22s linear infinite;
}
.earth-track {
width: 170px;
height: 170px;
border-radius: 50%;
top: 223px;
left: 597px;
border: 1px dashed #848484;
position: absolute;
}
.earth {
width: 20px;
height: 20px;
border-radius: 50%;
top: 310px;
left: 588px;
background-color: #687ad2;
position: absolute;
transform-origin: 95px 0;
-webkit-transform-origin: 95px 0;
-moz-transform-origin: 95px 0;
-ms-transform-origin: 95px 0;
-o-transform-origin: 95px 0;
animation: negative-rotate 15s linear infinite;
-webkit-animation: negative-rotate 15s linear infinite;
-moz-animation: negative-rotate 15s linear infinite;
-o-animation: negative-rotate 15s linear infinite;
}
.mars-track {
width: 220px;
height: 220px;
border-radius: 50%;
top: 198px;
left: 572px;
border: 1px dashed #848484;
position: absolute;
}
.mars {
width: 18px;
height: 18px;
border-radius: 50%;
top: 310px;
left: 564px;
background-color: #bb502d;
position: absolute;
transform-origin: 119px 0;
-webkit-transform-origin: 119px 0;
-moz-transform-origin: 119px 0;
-ms-transform-origin: 119px 0;
-o-transform-origin: 119px 0;
animation: negative-rotate 18s linear infinite;
-webkit-animation: negative-rotate 18s linear infinite;
-moz-animation: negative-rotate 18s linear infinite;
-o-animation: negative-rotate 18s linear infinite;
}
.jupiter-track {
width: 290px;
height: 290px;
border-radius: 50%;
top: 162px;
left: 537px;
border: 1px dashed #848484;
position: absolute;
}
.jupiter {
width: 36px;
height: 36px;
border-radius: 50%;
top: 310px;
left: 522px;
background-color: #e6ba35;
position: absolute;
transform-origin: 161px 0;
-webkit-transform-origin: 161px 0;
-moz-transform-origin: 161px 0;
-ms-transform-origin: 161px 0;
-o-transform-origin: 161px 0;
animation: negative-rotate 5s linear infinite;
-webkit-animation: negative-rotate 5s linear infinite;
-moz-animation: negative-rotate 5s linear infinite;
-o-animation: negative-rotate 5s linear infinite;
}
.saturn-track {
width: 380px;
height: 380px;
border-radius: 50%;
top: 116px;
left: 492px;
border: 1px dashed #848484;
position: absolute;
}
.saturn {
width: 34px;
height: 34px;
border-radius: 50%;
top: 310px;
left: 476px;
background-color: #e4cf8c;
position: absolute;
transform-origin: 206px 0;
-webkit-transform-origin: 206px 0;
-moz-transform-origin: 206px 0;
-ms-transform-origin: 206px 0;
-o-transform-origin: 206px 0;
animation: negative-rotate 8s linear infinite;
-webkit-animation: negative-rotate 8s linear infinite;
-moz-animation: negative-rotate 8s linear infinite;
-o-animation: negative-rotate 8s linear infinite;
}
.uranus-track {
width: 462px;
height: 462px;
border-radius: 50%;
top: 75px;
left: 451px;
border: 1px dashed #848484;
position: absolute;
}
.uranus {
width: 30px;
height: 30px;
border-radius: 50%;
top: 310px;
left: 438px;
background-color: #51b0dc;
position: absolute;
transform-origin: 244px 0;
-webkit-transform-origin: 244px 0;
-moz-transform-origin: 244px 0;
-ms-transform-origin: 244px 0;
-o-transform-origin: 244px 0;
animation: positive-rotate 10s linear infinite;
-webkit-animation: positive-rotate 10s linear infinite;
-moz-animation: positive-rotate 10s linear infinite;
-o-animation: positive-rotate 10s linear infinite;
}
.neptune-track {
width: 546px;
height: 546px;
border-radius: 50%;
top: 33px;
left: 408px;
border: 1px dashed #848484;
position: absolute;
}
.neptune {
width: 32px;
height: 32px;
border-radius: 50%;
top: 310px;
left: 394px;
background-color: #596bd4;
position: absolute;
transform-origin: 288px 0;
-webkit-transform-origin: 288px 0;
-moz-transform-origin: 288px 0;
-ms-transform-origin: 288px 0;
-o-transform-origin: 288px 0;
animation: negative-rotate 13s linear infinite;
-webkit-animation: negative-rotate 13s linear infinite;
-moz-animation: negative-rotate 13s linear infinite;
-o-animation: negative-rotate 13s linear infinite;
}
@keyframes positive-rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@-webkit-keyframes positive-rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@-moz-keyframes positive-rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@-ms-keyframes positive-rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@-o-keyframes positive-rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@keyframes negative-rotate {
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
}
}
@-webkit-keyframes negative-rotate {
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
}
}
@-moz-keyframes negative-rotate {
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
}
}
@-ms-keyframes negative-rotate {
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
}
}
@-o-keyframes negative-rotate {
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<!--太阳-->
<div class="sunlight"></div>
<!--水星轨道-->
<div class="mercury-track"></div>
<!--水星-->
<div class="mercury"></div>
<!--金星轨道-->
<div class="venus-track"></div>
<!--金星-->
<div class="venus"></div>
<!--地球轨道-->
<div class="earth-track"></div>
<!--地球-->
<div class="earth"></div>
<!--火星轨道-->
<div class="mars-track"></div>
<!--火星-->
<div class="mars"></div>
<!--木星轨道-->
<div class="jupiter-track"></div>
<!--木星-->
<div class="jupiter"></div>
<!--土星轨道-->
<div class="saturn-track"></div>
<!--土星-->
<div class="saturn"></div>
<!--天王星轨道-->
<div class="uranus-track"></div>
<!--天王星-->
<div class="uranus"></div>
<!--海王星轨道-->
<div class="neptune-track"></div>
<!--海王星-->
<div class="neptune"></div>
</body>
</html>
没有做适配处理，默认以 1366 * 768 分辨率来写的样式，效果如下：
image.png
