html css 实现星星海,js实现星星海特效的示例

首先需要获取屏幕大小：

var screenWidth = document.documentElement.clientWidth;

var screenHeight = document.documentElement.clientHeight;

接着可以定义动画(星星透明度)：

@keyframes flash {

0%{opacity: 0}

25%{opacity: 0.25}

50%{opacity: 0.5}

75%{opacity: 0.75}

100%{opacity: 1}

}

全部代码如下：

Title

div{

width: 70px;

height: 80px;

background: url("./images/star.jpg") no-repeat;

animation: flash 1s;

}

body{

background-color: black

}

@keyframes flash {

0%{opacity: 0}

25%{opacity: 0.25}

50%{opacity: 0.5}

75%{opacity: 0.75}

100%{opacity: 1}

}

var screenWidth = document.documentElement.clientWidth;

var screenHeight = document.documentElement.clientHeight;

// 生产50个星星

for (let i = 0; i <50 ; i++) {

var box=document.createElement('div');

document.body.appendChild(box);

x=Math.random()*screenWidth;

y=Math.random()*screenHeight;

box.style.position='relative';

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

box.style.right=y+'px';

}

boxList=document.getElementsByTagName("div");

for (let i = 0; i < boxList.length; i++) {

boxList[i].οnmοuseοver=function () {

this.style.transform='scale(1.5,1.5)';

};

boxList[i].οnmοuseοut=function () {

this.style.transform='scale(1,1)';

};

}

效果如下：

以上就是js实现星星海特效的示例的详细内容，更多关于js 星星海特效的资料请关注脚本之家其它相关文章！