應用背景：根據項目要求，對完成的展示大屏 添加星星閃爍的特效，找了很多的特效，但是這些特效直接在瀏覽器顯示的話 正常沒有任何問題，但是如果想要在一個完成的大屏的添加一些星星閃爍的效果，會不起任何作用或者造成原始的大屏中的使用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 style="background: black;">
</body>
</html>
自己做的大屏效果如圖
以上即為效果圖
所有的代碼可見鏈接：https://x-x.fun/i/CT3434e395TWp
或者可以直接給我留言 直接獲取
本地全部代碼存儲位置：D:\my\VSCodeWorkSpace\StudyDic\star5_finished.html
參考鏈接：https://blog.csdn.net/qq_44829011/article/details/106610883?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank
另外一個星星閃爍效果，可以單獨的屏幕背景去閃爍，但是與其他的使用了swiper插件的 ，無法和已經完成的大屏融合起來，，
（2）https://www.cnblogs.com/heyujun-/p/6759464.html