Menu
On my Solar System website I am looking to have a large amount of small shining white circles (Maybe 1 or 2px big) dotted in random places on the background each time the website is visited. The circles don't have to be scr="" images, it can just be plain white coloured circles.
html {
background-color: #000;
}
.sun {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
border-radius: 50%;
box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px;
}
.earth {
height: 25px;
width: 25px;
border-radius: 50%;
box-shadow: green 0 0 25px;
}
.earth-orbit {
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
/*border-radius: 50%;*/
/*border: 1px dotted gray;*/
-webkit-animation: spin-right 10s linear infinite;
}
.moon {
height: 10px;
width: 10px;
}
.moon-orbit {
top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin-left: -12.5px;
margin-bottom: -37px;
border: 1px solid rgba(255, 0, 0, 0.1);
border-radius: 50%;
-webkit-animation: spin-right 1s linear infinite;
}
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
}
}<!DOCTYPE html>
<html>
<head>
<title>Vanishing Act</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<img class="sun" src="sun_transparent.png">
</div>
<div class="earth-orbit">
<div class='moon-orbit'>
<img class="moon" src="https://dl.dropboxusercontent.com/u/24899062/cc/moon.png" />
</div>
<img class="earth" src="https://dl.dropboxusercontent.com/u/24899062/cc/earth.png" />
</div>
</body>
</html>
214
That's a nice effect.
You can create a star class:
.star {
position: fixed;
width: 1px;
height: 1px;
background: white;
}
To ensure that stars are always behind the solar system objects, apply a z-index to your solar system images:
img {
z-index: 1;
}
You can add random stars to the sky by giving them left/top coordinates based on multiplying Math.random() by the screen's width and height:
for(var i = 0 ; i < 500 ; i++) {
var x = Math.random()*screen.width;
var y = Math.random()*screen.height;
var star= document.createElement('div');
star.className= 'star';
star.style.left= x+'px';
star.style.top= y+'px';
document.body.appendChild(star);
}html {
background-color: #000;
}
img {
z-index: 1;
}
.star {
position: fixed;
width: 1px;
height: 1px;
background: white;
}
.sun {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
border-radius: 50%;
}
.earth {
height: 25px;
width: 25px;
border-radius: 50%;
}
.earth-orbit {
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
/*border-radius: 50%;*/
/*border: 1px dotted gray;*/
-webkit-animation: spin-right 10s linear infinite;
}
.moon {
height: 10px;
width: 10px;
}
.moon-orbit {
top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin-left: -12.5px;
margin-bottom: -37px;
border: 1px solid rgba(255, 0, 0, 0.1);
border-radius: 50%;
-webkit-animation: spin-right 1s linear infinite;
}
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
}
}<img class="sun" src="http://www.mprgroup.net/images/august2011/sun_transparent.png">
<div class="earth-orbit">
<div class='moon-orbit'>
<img class="moon" src="http://space-facts.com/wp-content/uploads/moon-transparent.png" />
</div>
<img class="earth" src="http://space-facts.com/wp-content/uploads/earth-transparent.png" />
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
