jquery - 让具有类别的对象在循环中随机出现/消失

Question

我正在尝试模仿星星背景。

星星是在加载时创建并随机散布在整个网站上的。到目前为止我已经调整了一些代码。

var star="<span class='star'>•</span>";
var numStars=100;
for(var x=1;x<=numStars;x++){
    $(star).appendTo("body");
}
// get window dimentions
var ww = $(window).width();
var wh = $(window).height();
$(".star").each(function(i){
    var posx = Math.round(Math.random() * ww)-20;
    var posy = Math.round(Math.random() * wh)-20;
    $(this).css("top", posy + "px").css("left", posx + "px");
});

https://jsfiddle.net/0quLgtaq/3/

我现在喜欢让它们随机淡入、保持，然后淡出。

我认为该方法是随机选择一颗星星，然后向其添加一个 .active 类，然后在 x 秒后将其删除。处于某种循环中。

我不太确定从哪里开始。任何让我开始的粗略代码都会很棒。谢谢

Answer 1

您可以使用CSS animations :

jQuery(document).ready(function($) {
    var star = "<span class='star'>•</span>";
    var numStars = 100;
    for (var x = 1; x <= numStars; x++) {
        var randomDelay = Math.random()*10;
        $(star)
            .css("animation-delay", randomDelay + "s")
            .appendTo("body");
    }
    // get window dimensions
    var ww = $(window).width();
    var wh = $(window).height();
    $(".star").each(function(i) {
        var posx = Math.round(Math.random() * ww) - 20;
        var posy = Math.round(Math.random() * wh) - 20;
        $(this)
            .css("top", posy + "px")
            .css("left", posx + "px");
    });
});

.star {
    color: black;
    position: absolute;
    opacity: 0;
    animation: fade 2s linear;
}

@keyframes fade {
    0%,
    100% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

同时在 Fiddle .