本文主要详细介绍js实现星光闪烁的特效。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

在本文中，我们分享js实现星星闪光特效的具体代码，供大家参考。具体内容如下

效果如下

思路：

1.准备一张张星星的图片。

2、创造多颗星(你可以用坏的)

3.求可视化网页的宽度和高度，clientWidth，clientHeight。

4.使用Math.random()设置星星的随机坐标

5.css中的scale可以用来设置星星的缩放比例。

6.设置星星的缩放延迟频率动画延迟。

7、给星星添加动画(鼠标移动时，星星方法旋转)

代码如下所示

风格

*{

边距：0；

填充：0；

列表样式：无；

}

正文{

背景色：# 000；

}

跨度{

宽度：30px

高度：30px

背景：url('./images_js/star.png ')不重复；

位置：绝对；

背景尺寸：100% 100%；

动画：flash 1s交替无限；

}

@关键帧闪烁{

0% {不透明度：0；}

100% {不透明度：1；}

}

跨度：悬停{

变换：缩放(3，3)旋转(180度)！重要；

过渡：全1；

}

/风格

/头

身体

脚本

window.onload=function () {

//1.找到屏幕的大小

var screenW=document . documentelement . client width；

var screenH=document . documentelement . client height；

//2.动态创建星星

for(var I=0；i150i ){

//2.1创建一个星

var span=document . createelement(' span ')；

document . body . appendchild(span)；

//2.2随机坐标

var x=parse int(math . random()* screenW)；

var y=parse int(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 ')'；

//2.4频率

var rate=math . random()* 1.5；

span . style . animation delay=rate ' s '；

}

}

/脚本

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。