HTML5 鼠标跟随的彩球轨迹动画

Mouse balls animation

h5, mouse, particle

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4524
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

var mousePos = {};

function getRandomInt(min, max) {
        return Math.round(Math.random() * (max - min + 1)) + min;
    }

function getRandom(min, max) {
        return Math.random() * (max - min + 1) + min;
    }

$(window).mousemove(function(e) {
        mousePos.x = e.pageX;
        mousePos.y = e.pageY;
    });

$(window).mouseleave(function(e) {
        mousePos.x = -1;
        mousePos.y = -1;
    });

var draw = setInterval(function() {
        if (mousePos.x > 0 && mousePos.y > 0) {

var range = 15;

var color = "background: rgb(" + getRandomInt(0, 255) + "," + getRandomInt(0, 255) + "," + getRandomInt(0, 255) + ");";

var sizeInt = getRandomInt(10, 30);
            size = "height: " + sizeInt + "px; width: " + sizeInt + "px;";

var left = "left: " + getRandomInt(mousePos.x - range - sizeInt, mousePos.x + range) + "px;";

var top = "top: " + getRandomInt(mousePos.y - range - sizeInt, mousePos.y + range) + "px;";

var style = left + top + color + size;
            $("<div class='ball' style='" + style + "'></div>").appendTo('#wrap').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
                $(this).remove();
            });
        }
    }, 1);
});

编译

CSS

HTML

Mouse balls animation

h5, mouse, particle

编辑器支持Emmet

快捷键

Mouse balls animation

h5, mouse, particle

HTML5 粒子随音乐而律动的乐曲可视化动画

HTML5 Canvas彩虹粒子组成的动画文本

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：