html实现颜料效果,HTML5 彩色油漆（颜料）滴落动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var speeds = [];

var count = 1;

var colors = ['#bf1e2e', '#ee4037', '#dc5323', '#e1861b', '#e1921e', '#f7ac40', '#f7e930', '#d1da22', '#8bc43f', '#38b349', '#008d42', '#006738', '#29b473', '#00a69c', '#26a9e1', '#1a75bb', '#2a388f', '#262161', '#652d90', '#8e2792', '#9e1f64', '#d91c5c', '#ed297b', '#d91c5c', '#db1e5e', '#bf1e2e', '#f6931e', '#f05a28', '#f6931e', '#fbaf41']

var width = parseInt($('html').css('width'), 10);

var random = function(mult, add) {

return Math.floor((Math.random() * mult) + add);

};

var drop = function(n, height, color) {

$('body').append('

};

var createDrops = function(space) {

for (var i = speeds.length; i < space / 10; i++) {

speeds.push(random(3000, 2000));

drop(i, random(70, 30), colors[count]);

if (count < colors.length - 1) {

count++;

} else {

count = 0;

}

}

};

var animateDrops = function(startingN) {

for (var i = startingN; i < speeds.length; i++) {

$('.drop:nth-child(' + i + ')').slideDown(speeds[i]);

}

};

createDrops(width);

animateDrops(0);