Question

我正在尝试为我正在制作的应用创建滚动星空。

它有一个大的精灵，通过CSS Transform（margin-left属性）滚动。

在那之上，我生成更多的星形精灵，我通过CSS动画移动。我为它们动态创建一个新样式，并将该样式分配给精灵。（动态样式非常相似 - 它会随着时间的推移动画余量。它们需要由javascript控制，因为关键帧的位置和动画的持续时间会随着程序的运行而变化。

虽然星域位于zIndex：-1000（硬编码到CSS文件中），并且动态生成的星星的zIndex在-1到-100之间，但它们在星空后排序。

完整代码位于Github，相关位位于以下位置：

创建'背景'星空：

/* Create a starfield background, and get it moving via a CSS Transform */
starfield = document.createElement("img");
starfield.style.zIndex = -1000;
starfield.style.position = "absolute";
starfield.style.clip = "rect(0px 478px 298px 0px)";
starfield.src = "media/images/starfield-actual.jpg";

创建一个动态星星以在背景上移动：

size = Math.floor((Math.random() * 99) + 1);
star.style.zIndex = size * -1;
star.style.marginLeft = "480px";
top = topPadding - 50 + Math.random() * 300;
star.style.marginTop = top + "px";
document.styleSheets[cssIndex].insertRule("@-webkit-keyframes star_" + star.id + "_Keyframes {\n" + animationFrames + "\n}", 0, star.id);
document.styleSheets[cssIndex].insertRule(".star_" + star.id + "{\n  -webkit-animation-name: star_" + star.id + "_Keyframes;\n" + "  -webkit-animation-duration: 1s;\n}", 0, star.id);
star.className = star.className + " star_" + star.id;

任何想法都非常感激 - 包括“OMG你为什么这样做”。：）

对动态生成（通过Javascript）HTML对象进行排序

0 个答案: