jQuery+CSS3夜空星星背景动效

xyc

      之前项目的这个星星背景特效还是很不错的，整理一下直接上代码给大家分享一下。
      效果：
      
      css：
      

[CSS] 纯文本查看 复制代码

.all {
  width:100%;
  min-height:100%;
  background:MidnightBlue;
  position:relative;
}
.star {
  width:2px;
  height:2px; 
  background-color:rgba(255,255,255,1);
  border-radius:50%;
  background: radial-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
  display:inline-block;
  position: absolute;
}
.nebuleuse {
  min-height:50%;
  height:50%;
  position: absolute;
  top:25%;
  background:rgba(255,255,255,0);
}
.pink {
  background: radial-gradient(rgba(255,141,161,1), rgba(255,255,255,0));
  width:3px;
  height:3px;
}
.yellow {
  background: radial-gradient(rgba(255,255,117,1), rgba(255,255,255,0));
  width:4px;
  height:4px;
}
.naine {
  width:5px;
  height:5px;
}
.soleil {
  width:6px;
  height:6px;
}
.novae {
  width:7px;
  height:7px;
}
.geante {
  width: 17px; 
  height: 17px;
  background: radial-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0));
}
@keyframes mymove {
    to {top:100%;left: 0;}
}
.-- {
  animation-name: mymove;
  animation-duration: 2s;
  animation-iteration-count:infinite;
}

     HTML：
     

[HTML] 纯文本查看 复制代码

<div class="all">
	<div class="star"></div>
</div>

     js：
     

[JavaScript] 纯文本查看 复制代码

var star = $('.star');
var galaxie = 777;
var galaxieTiers = galaxie / 3;
var galaxieSept = galaxie / 7;
var galaxieVingtUn = galaxie / 21;
var galaxieQuarante = galaxie / 40;
var galaxieSoixante = galaxie / 60;
for (var i = 0; i < galaxie; i++) {
      star.clone().addClass('' +i+ '').appendTo('.all')
    };

var valeursH =[];
var valeursW =[];

$('.star').each(function() {
  var hstar = (Math.random() * 100).toFixed(1);
  var wstar = (Math.random() * 100).toFixed(1);
  
  if (jQuery.inArray(hstar, valeursH) != -1) {
    var doublonH = valeursH.indexOf(hstar);
    if (valeursW[doublonH] == wstar){
      $(this).addClass('geante');
    }
  }
  
  if (hstar <= 50 && wstar <= 50) {
    $(this).addClass('haut-g');
  } else if (hstar >= 50 && wstar <= 50) {
    $(this).addClass('bas-g');
  } else if (hstar <= 50 && wstar >= 50) {
    $(this).addClass('haut-d');
  } else {
    $(this).addClass('bas-d');
  }
  
  valeursH.push(hstar);
  valeursW.push(wstar);
  
  $(this).css({'top': ''+hstar+'%', 'left': ''+wstar+'%'});
  
 });

   

$('.star').each(function(i) {
  $(this).addClass('pink');
  return i<galaxieTiers;
 });

$('.star').not('.pink').each(function(i) {
  $(this).addClass('yellow');
  return i<galaxieTiers;
 });

$('.pink').each(function(i) {
  $(this).addClass('soleil');
  return i<galaxieSept;
 });

$('.yellow').each(function(i) {
  $(this).addClass('naine');
  return i<galaxieVingtUn;
 });

$('.pink').each(function(i) {
  $(this).addClass('novae');
  return i<galaxieQuarante;
 });

$('.yellow').each(function(i) {
  $(this).addClass('novae');
  return i<galaxieSoixante;
 });

function filante(){
  var t = Math.floor(Math.random() * 100);
  var l = Math.floor(Math.random() * 100);
  return [t,l];    
}
    
var first = true;
setInterval(function() {  
  $('.naine').each(function() {
    var trajectoire = filante();
    $(this).animate({
      opacity:Math.random(),
      top: trajectoire[0]+'%', 
      left: trajectoire[1]+'%',
      easing: 'easeInOutQuint',
      complete: function() {
        $(this).animate({
          opacity:Math.random(),
          top: trajectoire[0]+'%', 
          left: trajectoire[1]+'%',
          easing: 'easeInOutQuint',
        }, Math.floor(Math.random() * 5000))
      }
    }, Math.floor(Math.random() * 5000));
  });
}, (first ? 0 : 1000));
first = false;

   以上就是蓝色星星背景特效的全部代码了，如需源码，请点击》》 夜空星星背景特效.zip (31.26 KB, 下载次数: 0)

2021-7-30 15:39 上传

点击文件名下载附件
阅读权限: 90

范范

支持下