html css 实现星星海,纯JS+CSS3制作星星海背景特效

今天刚学的用JS和CSS3制作星星海特效

图片自己用PS简单做的一个星星，png格式

js代码中有必要的步骤注释

主要用到了随机函数，这个很重要，它让界面变得很炫，不是单调的闪烁，星星的变化主要是透明度和大小，动画展开时间不一样，设置了推迟时间，鼠标放到上面还会旋转放大。

另外我在学习的基础上更加完善了代码，在浏览器窗口缩放的同时，星星海特效会再次刷新，以便适应不同大小的屏幕，用户体验更加友好(试了很多次，还遇到bug，还好测试成功，还有是在火狐浏览器测试的)

直接复制可以运行，首先准备一张png格式的星星图片，建立一个名为img的文件夹，不要修改、写错路径或者建错文件夹哦~

星星海特效

body{

background: #000;

overflow: hidden;

}

span{

display: block;

width: 20px;

height: 20px;

position: absolute;

background: url(img/1.png) center center / 20px 20px;

animation: flash 1s alternate infinite;

}

@keyframes flash{

0%{ opacity: 0; }

100%{ opacity: 1; }

}

span:hover{

transform: scale(2) rotate(180deg) !important;

transition: all 1s;

}

window.onload = function(){

var b = false;

star();

window.onresize = star;

function star(){

if( b ){

document.body.innerHTML = '';

}

// 1.求出屏幕的尺寸

var screenW = document.documentElement.clientWidth;

var screenH = document.documentElement.clientHeight;

// 2.动态创建星星

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

// 2.1创建星星

var span = document.createElement('span');

document.body.appendChild(span);

// 2.2随机的坐标

var x = parseInt(Math.random() * screenW);

var y = parseInt(Math.random() * screenH);

span.style.left = x + 'px';

span.style.top = y + 'px';

// 2.3随机缩放

var scale = Math.random() * 1.5;

span.style.transform = 'scale(' + scale + ',' + scale + ')';

// 闪烁推迟

var rate = Math.random() * 1.5;

span.style.animationDelay = rate + 's';

}

b = true;

}

}