You can change the color or use sun and earth image then make it is very pretty.
Created
September 14, 2015 19:27
-
-
Save vubon/26163d62fb11db2c4480 to your computer and use it in GitHub Desktop.
Galaxy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Right below the sun --> | |
<div id="sun"> | |
<p> Sun</P> | |
</div> | |
<!-- Insert the 'earth' on the next line --> | |
<div id='earth-orbit'> | |
<div id="earth"> | |
<p> Earth</p> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body { | |
/* The universe takes up all available space */ | |
width: 100%; | |
height: 100%; | |
/* The universe is black */ | |
background-color: black; | |
} | |
#sun { | |
position: absolute; | |
/* Positions the top-left corner of the image to be * | |
/* in the middle of the box */ | |
top: 50%; | |
left: 50%; | |
/* Play with these numbers to see what it does */ | |
height: 200px; | |
width: 200px; | |
margin-top: -100px; | |
margin-left: -100px; | |
box-shadow: 0 0 64px yellow; | |
background-color: #FDB813; | |
border-radius:50%; | |
} | |
#sun p{text-align:center;margin-top:40%;color:red;font-size:20px;} | |
#earth { | |
/* Style your earth */ | |
position: absolute; | |
top: 25%; | |
left: 25%; | |
height:100px; | |
width:100px; | |
background-color:#246024; | |
border-radius:50%; | |
} | |
#earth p{text-align:center;margin-top:40%;color:#000;font-size:20px;} | |
#earth-orbit { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 500px; | |
height: 500px; | |
margin-top: -250px; | |
margin-left: -250px; | |
border-width: 2px; | |
border-style: dotted; | |
border-color: white; | |
border-radius: 50%; | |
-webkit-animation: spin-right 10s linear infinite; | |
-moz-animation: spin-right 10s linear infinite; | |
-ms-animation: spin-right 10s linear infinite; | |
-o-animation: spin-right 10s linear infinite; | |
animation: spin-right 10s linear infinite; | |
} | |
@-webkit-keyframes spin-right { | |
100% { | |
-webkit-transform: rotate(360deg); | |
-moz-transform: rotate(360deg); | |
-ms-transform: rotate(360deg); | |
-o-transform: rotate(360deg); | |
transform: rotate(360deg); | |
} | |
} | |
@keyframes spin-right { | |
100% { | |
-webkit-transform: rotate(360deg); | |
-moz-transform: rotate(360deg); | |
-ms-transform: rotate(360deg); | |
-o-transform: rotate(360deg); | |
transform: rotate(360deg); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment