jquery 星星流动效果

demo预览地址 https://www.jq22.com/yanshi22256

demo下载地址  https://www.jq22.com/jquery-info22256

 

没有弄成 gif ，没有找到免费录制屏幕成gif格式的

html

<div class="stars"></div> 

css  （ body要加overflow:hidden 样式）

@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}
.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  bottom: 0;
  perspective-origin: 50% 100%;
  left: 50%;
  animation: rotate 90s infinite linear;
  width:100%;
}

.star {
  width: 2px;
  height: 2px;
  background: #F7F7B6;
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: 0 0 -300px;
  transform: translate3d(0, 0, -300px);
  backface-visibility: hidden;
}

js

    var stars=800;  /*星星的密集程度，数字越大越多*/
    var $stars=$(".stars");
    var r=800;   /*星星的看起来的距离,值越大越远,可自行调制到自己满意的样子*/
    for(var i=0;i<stars;i++){
      var $star=$("<div/>").addClass("star");
      $stars.append($star);
    }
    $(".star").each(function(){
      var cur=$(this);
      var s=0.2+(Math.random()*1);
      var curR=r+(Math.random()*300);
      cur.css({ 
        transformOrigin:"0 0 "+curR+"px",
        transform:" translate3d(0,0,-"+curR+"px) rotateY("+(Math.random()*360)+"deg) rotateX("+(Math.random()*-50)+"deg) scale("+s+","+s+")"
         
      })
    })