Menu
On my Solar System model, when you click 'Toggle Orbits' it display the orbit for the all familiar planet earth, but you notice that the ring is not centred in the middle of the planet, only outside of it, how would I make it so it would be in the middle?
function myFunction() {
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;
overflow-x: hidden;
overflow-y: hidden;
}
.star {
position: absolute;
width: 1px;
height: 1px;
background: white;
z-index: -1;
}
.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;*/
}
#button-change {
position: absolute;
top: 2px;
left: 2px;
}
.earth {
position: absolute;
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;
-webkit-animation: spin-right 15s linear infinite;
}
.earth-lines {
border-width: 1px;
border-style: solid;
border-color: white;
border-radius: 50%;
position: absolute;
}
.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 4s 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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$('.earth-orbit').toggleClass('earth-lines');
});
});
</script>
</head>
<body onload="myFunction()">
<img class="sun" src="5.png">
</div>
<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://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=74422923" />
</div>
<button id="button-change">Toggle Orbits</button>
</body>
</html>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