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 style="background: black;">
         
    </body>
</html>