html页面上不断掉星星,html 页面的星星闪烁 特效 背景 （js案例 ）

应用背景：根据项目要求，对完成的展示大屏  添加星星闪烁的特效，找了很多的特效，但是这些特效直接在浏览器显示的话  正常没有任何问题，但是如果想要在一个完成的大屏的添加一些星星闪烁的效果，会不起任何作用或者造成原始的大屏中的使用swiper插件部分，会内容错乱

效果图：

标题效果如图

首先把页面背景调成黑色

再引入图片 设置随机的图片大小

let image_0 =$('');//style="opacity:1;

let w=Math.random()*50+50;

设置随机的图片位置

image_0.css('width',w);

image_0.css('position','absolute');

image_0.css('opacity',1);const height =window.innerHeight-300;const width =window.innerWidth-300;

image_0.css('right',width*Math.random());

image_0.css('top',height*Math.random());

将对象添加到body中 设置星星的淡出效果

$('body').append(image_0);

image_0.fadeOut('slow');

最后启动定时器 一次创建多个星星

setInterval(function(){ create();create();create();create();create();create(); },800)

星星素材图片：

第一个素材

第二个素材

本效果写完后，浏览器打开直接就是第一张的gif动图的效果，

所有的代码：

function create(){var giao=[];

。。。。。。。

。。。。。。。

。。。。。。。$('body').append(image_0);

image_0.fadeOut('slow');

}

setInterval(function(){

create();create();create();create();create();create();

create();create();create();create();create();create();

},800)

})

自己做的大屏效果如图

以上即为效果图

或者可以直接给我留言  直接获取

本地全部代码存储位置：D:\my\VSCodeWorkSpace\StudyDic\star5_finished.html