Velocity.js 墨汁浸染动画

鼠标悬停到画布上，将出现墨汁。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// var circle = '', bgCircle = '', radius, circleTop, circleLeft;
function randRad(minRad, maxRad) {
        return Math.floor(Math.random() * (maxRad - minRad + 1)) + minRad;
    }
    // function createCircle(){
    //   var initRad = randRad(1,70);
    //   circle = document.createElement('div');
    //   circle.className = 'circle';
    //   bgCircle = document.createElement('div');
    //   bgCircle.className = 'bgcircle';
    //   circleTop = randRad(1,document.getElementById('cluster').offsetWidth);
    //   circleLeft = randRad(1,document.getElementById('cluster').offsetWidth);
    //   circle.style.top = circleTop + 2 + 'px';
    //   circle.style.left = circleLeft + 2 + 'px';
    //   bgCircle.style.top = circleTop + 'px';
    //   bgCircle.style.left = circleLeft + 'px';
    //   if(document.querySelectorAll('.circle').length>=100){
    //     document.getElementById('foreground').appendChild(circle);
    //     document.getElementById('background').appendChild(bgCircle); 
    //     $('.circle:first-child').velocity({
    // 		'height': '0px',
    // 		'width': '0px',
    // 		'margin-top': '0px',
    // 		'margin-left': '0px',
    // 		duration: 1000
    // 	},{
    // 		complete: function(){
    // 			$('.circle:first-child').remove();
    // 		}
    // 	});
    // 	$('.bgcircle:first-child').velocity({
    // 		'height': '0px',
    // 		'width': '0px',
    // 		'margin-top': '0px',
    // 		'margin-left': '0px',
    // 		duration: 1000
    // 	},{
    // 		complete: function(){
    // 			$('.bgcircle:first-child').remove();
    // 		}
    // 	});
    //   } else {
    //     document.getElementById('foreground').appendChild(circle);
    //     document.getElementById('background').appendChild(bgCircle); 
    // }
    // $('.circle:last-child').velocity({
    // 	'height': initRad + 'px',
    // 	'width': initRad + 'px',
    // 	'margin-top': -(initRad/2) + 'px',
    // 	'margin-left': -(initRad/2) + 'px'
    // });
    // $('.bgcircle:last-child').velocity({
    // 	'height': initRad + 4 + 'px',
    // 	'width': initRad + 4 + 'px',
    // 	'margin-top': -(initRad/2) + 'px',
    // 	'margin-left': -(initRad/2) + 'px'
    // });
    // setTimeout(createCircle, 500);
    // }
    // createCircle();

编译

CSS

HTML

鼠标悬停到画布上，将出现墨汁。

编辑器支持Emmet

快捷键

鼠标悬停到画布上，将出现墨汁。

html5 canvas simplex-noise.js彩带粒子流动画

babylon.js自动生成3D地形（terrain builder）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：