Untitled diff

Created Diff never expires
4 removals
Lines
Total
Removed
Words
Total
Removed
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
100 lines
10 additions
Lines
Total
Added
Words
Total
Added
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
100 lines
body {
body {
background: black;
background: black;
}
}
#earth,
#earth,
#moon,
#moon,
#asteroid,
#asteroid,
#sun {
#sun {
position: absolute;
position: absolute;
border-radius: 50%;
border-radius: 50%;
}
}
#earth {
#earth {
height: 40px;
height: 40px;
width: 40px;
width: 40px;
background: deepskyblue;
background: deepskyblue;
box-shadow: 0 0 10px blue;
box-shadow: 0 0 10px blue;
top: 50%;
top: 50%;
left: 50%;
left: 50%;
margin: -200px 0 0 -20px;
margin: -200px 0 0 -20px;
-webkit-animation: Erevolve 12s linear infinite;
-webkit-animation: Erevolve 12s linear infinite;
animation: Erevolve 12s linear infinite;
animation: Erevolve 12s linear infinite;
transform-origin: 20px 200px;
transform-origin: 20px 200px;
z-index: 100;
z-index: 100;
}
}
#moon {
#moon {
top: -30px;
top: -40px;
left: 10px;
left: 15px;
height: 10px;
height: 10px;
width: 10px;
width: 10px;
background: white;
background: white;
-webkit-animation: Mrevolve 2s linear infinite;
/* -webkit-animation: Mrevolve 2s linear infinite; */
animation: Mrevolve 2s linear infinite;
/* animation: Mrevolve 2s linear infinite; */
transform-origin: 5px 30px;
/* transform-origin: 5px 30px; */
}
}
#asteroid {
#asteroid {
top: -10px;
top: -15px;
left: 0px;
left: 0px;
height: 6px;
height: 6px;
width: 6px;
width: 6px;
background: #aaa;
background: #aaa;
-webkit-animation: Arevolve 2s linear infinite;
-webkit-animation: Arevolve 2s linear infinite;
animation: Arevolve 2s linear infinite;
animation: Arevolve 2s linear infinite;
transform-origin: 3px 10px;
transform-origin: 3px 20px;
}
}
#sun {
#sun {
height: 100px;
height: 100px;
width: 100px;
width: 100px;
background: gold;
background: gold;
box-shadow: 0 0 50px gold;
box-shadow: 0 0 50px gold;
top: 50%;
top: 50%;
left: 50%;
left: 50%;
margin: -50px 0 0 -50px;
margin: -50px 0 0 -50px;
}
}
@-webkit-keyframes Erevolve {
@-webkit-keyframes Erevolve {
0% {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
}
100% {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
@keyframes Erevolve {
@keyframes Erevolve {
0% {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
}
100% {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
@-webkit-keyframes Mrevolve {
@-webkit-keyframes Mrevolve {
0% {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
}
100% {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
@keyframes Mrevolve {
@keyframes Mrevolve {
0% {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
}
100% {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
@-webkit-keyframes Arevolve {
@-webkit-keyframes Arevolve {
0% {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
}
100% {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
@keyframes Arevolve {
@keyframes Arevolve {
0% {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
}
100% {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}