使用HTML5实现丝丝缕缕飘散动画特效

wisp in wind animation effects，随风飘散的小花、随机游走的萤虫。

html5, canvas, particle

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

;
(function(main) {
    var args = {};
    main(args);
})(function(args) {

'use strict';

var c = document.getElementById('c');
    var ctx = c.getContext('2d');

c.width = window.innerWidth;
    c.height = window.innerHeight;

var mouse = {
        isMoveForFirst: false,
        x: 0,
        y: 0,
        ox: 0,
        oy: 0,
        tx: c.width / 2,
        ty: c.height / 2
    };

var Box = function(x, y, w, h) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.a = Math.random() * Math.PI * 2;
        this.s = 1;
        this.v = 0;
        this.o = 1;
    };

Box.prototype = {
        constructor: Box,
        update: function() {

this.o -= 0.01;
            this.v += 0.1;
            this.a += Math.random() * 0.8 - 0.4;
            this.x += Math.cos(this.a) * this.v;
            this.y += Math.sin(this.a) * this.v;

this.v = Math.min(10, this.v);
            this.o = Math.max(0, this.o);

},
        reset: function() {
            this.a = Math.random() * Math.PI * 2;
            this.v = 0;
            this.o = 1;
        },
        render: function(ctx) {
            ctx.save();
            ctx.globalAlpha = this.o;
            ctx.fillStyle = 'white';
            ctx.translate(this.x, this.y);
            ctx.rotate(this.a);
            ctx.scale(this.s, this.s);
            ctx.fillRect(-this.w / 2, -this.h / 2, this.w, this.h);
            ctx.restore();
        }
    };

var box = null;
    var boxList = [];
    var maxBox = 200;
    var index = -1;

c.addEventListener('mousemove', function(e) {
        var rect = c.getBoundingClientRect();
        mouse.isMoveForFirst = true;
        mouse.x = e.clientX - rect.left;
        mouse.y = e.clientY - rect.top;
    });

requestAnimationFrame(function loop() {

requestAnimationFrame(loop);

ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, c.width, c.height);

if (!mouse.isMoveForFirst) {

var dx = mouse.tx - mouse.x;
            var dy = mouse.ty - mouse.y;
            var d = Math.sqrt(dx * dx + dy * dy);

mouse.x += dx * 0.1;
            mouse.y += dy * 0.1;

if (d < 0.98) {
                mouse.x = mouse.tx;
                mouse.y = mouse.ty;
            }

}

if (mouse.x !== mouse.ox && mouse.y !== mouse.oy) {
            if (boxList.length < maxBox) {
                box = new Box(mouse.x, mouse.y, 10, 3);
                boxList.push(box);
            } else {
                index = (index + 1) % boxList.length;
                box = boxList[index];
                box.reset();
                box.x = mouse.x;
                box.y = mouse.y;
            }
        }

for (var i = 0; i < boxList.length; i++) {
            box = boxList[i];
            box.update();
            box.render(ctx);
        }

mouse.ox = mouse.x;
        mouse.oy = mouse.y;

});

编译

CSS

HTML

wisp in wind animation effects，随风飘散的小花、随机游走的萤虫。

html5, canvas, particle

编辑器支持Emmet

快捷键

wisp in wind animation effects，随风飘散的小花、随机游走的萤虫。

html5, canvas, particle

使用HTML5 WebGL GLSL着色器代码实现的太空星云图粒子动画特效

使用Anime.js实现的18个HTML5文本动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：