루프에서 클래스가있는 객체를 임의로 표시하거나 사라지게하십시오.

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 초 후에 제거하는 방법이 있다고 생각합니다. 일종의 루프.

어디서부터 시작해야할지 모르겠습니다. 나를 시작하는 코드는 훌륭합니다. 당신은 CSS animations을 사용할 수 있습니다 감사합니다

Answer 1

: Fiddle에 또한

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>

.