html页⾯的星星闪烁特效背景（js案例）
应⽤背景：根据项⽬要求，对完成的展⽰⼤屏添加星星闪烁的特效，了很多的特效，但是这些特效直接在浏览器显⽰的话正常没有任何问题，但是如果想要在⼀个完成的⼤屏的添加⼀些星星闪烁的效果，会不起任何作⽤或者造成原始的⼤屏中的使⽤swiper插件部分，会内容错乱
效果图：
标题效果如图
⾸先把页⾯背景调成⿊⾊
再引⼊图⽚设置随机的图⽚⼤⼩
let image_0 =$('<img src="img/20190326164319145.gif" ;alt=""  style:"opacity:1"/>');
//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动图的效果，
所有的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src='js/Jq.js'></script>
<script type="text/javascript">
$(function(){
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)
})
</script>
</head>
<body >
</body>
</html>
⾃⼰做的⼤屏效果如图
以上即为效果图
所有的代码可见链接：
或者可以直接给我留⾔直接获取
本地全部代码存储位置：D:\my\VSCodeWorkSpace\StudyDic\star5_finished.html
实现特效的代码js
参考链接：blog.csdn/qq_44829011/article/details/106610883?utm_medium=distribute.pc_aggpage_-task-blog-2~all~first_rank
另外⼀个星星闪烁效果，可以单独的屏幕背景去闪烁，但是与其他的使⽤了swiper插件的，⽆法和已经完成的⼤屏融合起来，，
合成后⽆法显⽰（1）
（2）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。