jQuery夜空星星闪烁背景动画代码

来源:https://www.sucaihuo.com/js/2241.html 2017-06-27 21:09浏览(2454) 收藏

jQuery夜空星星闪烁背景动画代码,天空中布满星星动画特效。
jQuery夜空星星闪烁背景动画代码
分类:其它特效 > 动画效果 难易:初级
查看演示 下载资源 下载积分: 10 积分

js代码

<script type="text/javascript">
var cols = ['#f5d76e','#f7ca18','#f4d03f','#ececec','#ecf0f1','#a2ded0'];
var stars = 250;

for (var i = 0; i <= stars; i++) {

	var size = Math.random()*3;
  var color = cols[parseInt(Math.random()*4)];

	$('#starsBox').prepend('<span style=" width: ' + size + 'px; height: ' + size + 'px; top: ' + Math.random()*100 + '%; left: ' + Math.random()*100 + '%; background: ' + color + '; box-shadow: 0 0 '+ Math.random()*10 +'px' + color + ';"></span>') ;
};

setTimeout(function(){ 
	$('#starsBox span').each(function(){  
 		$(this).css('top', Math.random()*100 + '%').css('left', Math.random()*100 + '%'); 
  });
}, 1);

setInterval(function(){ 
	$('#starsBox span').each(function(){  	
 		$(this).css('top', Math.random()*100 + '%').css('left', Math.random()*100 + '%'); 
  });
}, 100000);
</script>
标签: 星星闪烁
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2