jQuery实现类似“博客园”的鼠标粒子效果

1、样式效果：

2、实现代码：

jquery实现鼠标点击网页，彩色气泡动画。

size：气泡初始大小（逐渐变小）

num:气泡数量

  * 添加鼠标点击样式
     * jquery实现鼠标点击网页，彩色气泡动画。
     * size：气泡初始大小（逐渐变小）
     * num:气泡数量
     */
    function particle_mouse(){
        const size = 30;
        const num = 20;
        $("body").on('click',function(e) {
            const COLOURS = ['#00B4FF', '#8300FF', '#00FF98', '#00B8FF', '#F3FF00', '#00FF0A', '#FF0055'];
            for(let i=0; i<num; i++){
                const $i = $("<div/>");
                const x = e.pageX - size / 2,
                    y = e.pageY + size / 2;
                $i.css({
                    "z-index": 99,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": 900,
                    "height":size,
                    "width":size,
                    "background-color":COLOURS[Math.floor(Math.random()*COLOURS.length)],
                    "border-radius":size/2
                });
                $("body").append($i);
                $i.animate({
                        "top": y + Math.random()*360-180,
                        "left":x + Math.random()*360-180,
                        "height":0,
                        "width":0,
                        "opacity": 0
                    },
                    500,
                    function() {
                        $i.remove();
                    });
            }
        });
    }