html5 不规则div,HTML5/CSS3使用不规则圆形模拟雨水动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

$.coinFlip = function() {

return Math.random() > .5;

}

var h;

var w;

$(document).ready(function() {

h = $('body').outerHeight();

w = $('body').outerWidth();

drops();

$(window).resize(function() {

h = $('body').outerHeight();

w = $('body').outerWidth();

});

});

function drops() {

for (var i = 0; i < 50; i++) {

$.rain();

}

}

$.color = function() {

var r = Math.floor(Math.random() * 255);

var g = Math.floor(Math.random() * 255);

var b = Math.floor(Math.random() * 255);

var rgba = 'rgb(' + r + ', ' + g + ', ' + b + ')';

return rgba;

}

$.rain = function() {

var delay = Math.max(Math.round(Math.random() * 3000), 1000);

setTimeout(function() {

var x = Math.max(Math.floor(Math.random() * w), 10);

var y = Math.max(Math.floor(Math.random() * h), 10);

var drop = $('.drop').first().clone();

if (x >= (w - size)) {

x = w - size - 10;

}

if (y >= (h - size)) {

y = h - size - 10;

}

var size = Math.max(Math.round(Math.random() * 20), 10);

$('body').append(drop);

$(drop).children().addClass('falling').css({

'width': size,

'height': size,

'background-color': $.color(),

'border-color': $.color()

}).fadeIn('slow');

var minus = $.coinFlip();

$(drop).css({

'left': x,

'top': y,

'width': size,

'height': size

}).delay(delay / 2).queue(function(n) {

$(this).addClass('falling').fadeIn('fast', function() {

$(this).css({

'animation': 'drobble 3s ease-in-out infinite'

})

.animate({

'margin-top': '0px',

'opacity': '.6',

'width': size * 2.75,

'height': size * 2.75

}, delay / 2, 'swing', function() {

$(this).animate({

'margin-top': (minus ? -20 : 20) + 'px',

'opacity': '.7',

'width': size,

'height': size

}, delay / 1.5, 'swing', function() {

$(this).animate({

'margin-top': (minus ? -10 : 10) + 'px',

'opacity': '1',

'width': size * .25,

'height': size * .25

}, delay / 2, 'swing', function() {

$(this).animate({

'width': 1,

'height': 1

}, 'fast', 'swing', function() {

$(this).children().removeClass('falling').addClass('splash').css({

'width': size * 2,

'height': size * 2,

'animation-delay': '1s',

'animation': 'ripples 3s linear',

'transform': 'scale(.1)',

'animation-fill-mode': 'forwards',

'margin-top': ((size * 3) - (size * 2)) / 2

});

$(this).removeClass('falling').addClass('splash').css({

'width': size * 3,

'height': size * 3,

'animation': 'ripples 2s linear',

'transform': 'scale(.1)',

'animation-fill-mode': 'forwards',

'margin-top': -((size * 3) / 2),

'margin-left': -((size * 3) / 2)

}).delay(1500).queue(function(n2) {

n2();

$(this).fadeOut('slow', function() {

setTimeout(function() {

$.rain();

}, delay);

});

});

});

});

});

});

});

n();

});

}, delay);

}