在我的 Solar System 网站上，每次访问该网站时，我希望在背景的随机位置点缀大量 Shiny 的白色小圆圈(可能大 1 或 2 像素)。圆圈不必是 scr=""图像，它可以只是纯白色圆圈。
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>最佳答案
这是一个不错的效果。
你可以创建一个star类:
.star {
position: fixed;
width: 1px;
height: 1px;
background: white;
}
为确保恒星始终位于太阳系物体后面，请应用 z-index到您的太阳系图像:
img {
z-index: 1;
}
您可以通过乘以 Math.random() 给它们左/上坐标来将随机星星添加到天空中按屏幕的宽度和高度:
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>关于javascript - 随机定位图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27338185/