Question

在我的太阳系网站上，我希望每次访问网站时都会在背景上的随机位置点缀大量小的闪亮白圈（可能是1或2px大）。圈子不必是scr =＆＃34;＆＃34;图像，它可以只是纯白色的圆圈。

＆＃13;

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);
  }
}

＆＃13;

<!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>

＆＃13;

Answer 1

这是一个很好的效果。

您可以创建star课程：

.star {
  position: fixed;
  width: 1px;
  height: 1px;
  background: white;
}

为确保恒星始终位于太阳系对象后面，请将z-index应用于太阳系图像：

img {
  z-index: 1;
}

您可以根据屏幕的宽度和高度乘以Math.random()给它们左/上坐标，将随机星添加到天空中：

＆＃13;

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);
}

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

不是用大量的对象“污染”DOM而不是最终导致页面呈现速度变慢，为什么不考虑使用canvas绘制星星的解决方案呢？

这将是一个单独但更大的DOM元素，但可以非常快速地重绘，如果需要你也有一些艺术自由：

// load images (just one in this example)
sun = new Image();
sun.onload = function() {
  renderStars(750, 0.5, 1.5);
}
sun.src = "http://www.mprgroup.net/images/august2011/sun_transparent.png";

function renderStars(count, minSize, maxSize) {
  var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),

    i = 0,
    x, y, size;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();

  for (; i < count; i++) {
    x = canvas.width * Math.random();
    y = canvas.height * Math.random();
    size = minSize + (maxSize - minSize) * Math.random();

    // draw circle
    ctx.moveTo(x + size, y);
    ctx.arc(x, y, size, 0, 2 * Math.PI);
    ctx.closePath();
  }

  ctx.fillStyle = "#fff";
  ctx.fill();

  var r = 100; // image "radius"
  ctx.drawImage(sun, (canvas.width - r) * 0.5, (canvas.height - r) * 0.5, r, r);
}

 document.getElementById("refresh").onclick = function() {
  renderStars(750, 0.5, 1.5)
};

#canvas {background: #000}
#refresh {position: fixed}

<button id="refresh">@</button>
<canvas id="canvas" width="500" height="500"></canvas>

最后在星星的顶部绘制太阳等（drawImage(sun, x, y [,width, height])）;

每次尺寸更改时，画布都需要重新绘制。

设置画布以填充窗口（假设您使用CSS将其固定在左上角）：

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

随机定位图像

2 个答案: