前言：

做网页项目时想要背景是动态的，推荐两个我觉得比较可以的js动态背景。



随鼠标的移动而移动的线条，具体效果看图：

你焦点在哪，那么那里的线条就会汇聚到你的焦点处。

用法：将js声明到body内即可，我是放置在body底部的

<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"&gt;&lt;/script&gt;

1

可以鼠标点击产生字的，如图：

用法和第一个类似，不过在这个js文件前得先引入jquery:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script type="text/javascript">
            /* 鼠标 */
            var a_idx = 0;
            jQuery(document)
                    .ready(
                            function($) {
                                $("body")
                                        .click(
                                                function(e) {
                                                    var a = new Array("@健身",
                                                            "@学习", "@机车",
                                                            "@摄影", "@自由",
                                                            "@考研", "@自律",
                                                            "@独立", "@厨艺",
                                                            "@橘子", "@交友",
                                                            "@爱媳妇", "@爱家人");
                                                    var $i = $("<span></span>")
                                                            .text(a[a_idx]);
                                                    a_idx = (a_idx + 1)
                                                            % a.length;
                                                    var x = e.pageX, y = e.pageY;
                                                    $i
                                                            .css({
                                                                "z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
                                                                "top" : y - 20,
                                                                "left" : x,
                                                                "position" : "absolute",
                                                                "font-weight" : "bold",
                                                                "color" : "rgb("
                                                                        + ~~(255 * Math
                                                                                .random())
                                                                        + ","
                                                                        + ~~(255 * Math
                                                                                .random())
                                                                        + ","
                                                                        + ~~(255 * Math
                                                                                .random())
                                                                        + ")"
                                                            });
                                                    $("body").append($i);
                                                    $i.animate({
                                                        "top" : y - 180,
                                                        "opacity" : 0
                                                    }, 1500, function() {
                                                        $i.remove();
                                                    });
                                                });
                            });
        </script>

这里使用的是cdn形式的jquery即不用将jq放入本地文件再引入，直接访问网络上的jq即可，还有就是点击产生的字可以自行修改。

————————————————
版权声明：本文为CSDN博主「helllolsy」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/CodingNO1/article/details/104572143