用CSS实现超美星空特效impl

素材star.png，是在线ps的，“画”得比较渣（透明png图片）：

<style>
	@keyframes flash {
		0%{opacity: 0.2}
		50%{opacity: 1}
		100%{opacity: 0.2}
	}
	body{
		background: #000;
	}
	.star{
		background-image: url(star.png) ;
		width: 16px;
		height:16px;
		background-repeat:no-repeat;
		background-position-x:center;
		background-position-y:center;
		position:fixed;
		animation: flash 2s linear infinite;
	} 
	.star:hover{
		transform: scale(3, 3) rotate(180deg) !important;
		transition: all 1s;
	}
</style>
 
八芒星阵v2.0 

<script>
	var debug=console.log;
	var screenW = document.documentElement.clientWidth;
	var screenH = document.documentElement.clientHeight;
	//debug(screenW, screenH);
	for(var i=0; i<150; i++){
		var span = document.createElement('span');
		document.body.appendChild(span);
		var x = parseInt(Math.random() * screenW);
		var y = parseInt(Math.random() * screenH);
		span.style.left = x + 'px';
		span.style.top = y + 'px';
		
		//debug(x, y);
			
		span.style.zIndex = "0";
		span.className='star'
		var scale = Math.random() * 1.5;
		span.style.transform = 'scale('+ scale + ', ' + scale + ')';
	
		var rate = Math.random() * 1.5;
		span.style.animationDelay = rate + 's';

	}
</script>

这是这篇文章的“实现”文，原文少了css和图片素材。