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

Rainbow Rain Drops 未使用Canvas，对机器计算能力要求高。

html5, 下雨动画

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$.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);
}

编译

CSS

body {
    padding: 0px;
    margin: 0px;
    background-color: black;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
}
div#water {
    background-color: black;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 10;
}
.drop,
.drop div {
    opacity: .5;
    display: none;
    position: absolute;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    background-color: rgba(0, 255, 255, .1);
    border: solid 1px rgba(0, 255, 255, .3);
    -webkit-filter: blur(3px);
    filter: blur(3px);
}
.splash {
    opacity: .3 !important;
    border: solid 1px rgba(0, 255, 255, 1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    z-index: 5;
}
.drop {} .drop div {
    animation-delay: 1s;
    animation: drobble 2s ease-in-out infinite;
    z-index: 1000;
    position: relative;
    margin: 10px auto;
}
.falling {
    -webkit-filter: blur(1px);
    filter: blur(1px);
}
@keyframes ripples {
    0% {
        transform: scale(.1);
        border: solid 1px rgba(0, 255, 255, .8);
    }
    10% {
        transform: scale(.2);
        border: solid 1px rgba(0, 255, 255, .5);
    }
    20% {
        transform: scale(.3);
        border: solid 1px rgba(0, 255, 255, .8);
    }
    30% {
        transform: scale(.4);
        border: solid 1px rgba(0, 255, 255, .5);
    }
    40% {
        transform: scale(.5);
        border: solid 1px rgba(0, 255, 255, .8);
    }
    50% {
        transform: scale(.6);
        border: solid 1px rgba(0, 255, 255, .5);
    }
    60% {
        transform: scale(.7);
        border: solid 1px rgba(0, 255, 255, .8);
    }
    70% {
        transform: scale(.8);
        border: solid 1px rgba(0, 255, 255, .5);
    }
    80% {
        transform: scale(.9);
        border: solid 1px rgba(0, 255, 255, .8);
    }
    90% {
        transform: scale(1);
        border: solid 1px rgba(0, 255, 255, .5);
    }
    100% {
        transform: scale(1.1);
        border: solid 1px rgba(0, 255, 255, .8);
    }
}
@keyframes drobble {
    0% {
        transform: skewX(10deg);
        z-index: 100000;
    }
    10% {
        transform: skewY(-10deg);
        z-index: 10000;
    }
    20% {
        transform: skewX(10deg);
        z-index: 1000;
    }
    30% {
        transform: skewY(-10deg);
        z-index: 100;
    }
    40% {
        transform: skewX(10deg);
        z-index: 90;
    }
    50% {
        transform: skewY(-10deg);
        z-index: 80;
    }
    60% {
        transform: skewX(10deg);
        z-index: 70;
    }
    70% {
        transform: skewY(-10deg);
        z-index: 60;
    }
    80% {
        transform: skewX(10deg);
        z-index: 50;
    }
    90% {
        transform: skewY(-10deg);
        z-index: 40;
    }
    100% {
        transform: skewX(10deg);
        z-index: 10;
    }
}
div#water {
    background-color: transparent;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 10;
}
div#water:before {
    content: '';
    background-color: transparent;
    background-image: url('/uploads/161101/water.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: .05;
    animation-delay: 5s;
    animation: water 6s ease-in-out infinite;
}
div#water:after {
    content: '';
    background-color: transparent;
    background-image: url('/uploads/161101/water.jpg');
    background-repeat: no-repeat;
    background-size: 110% 110%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: .05;
    animation: water 10s ease-in-out infinite;
    transform: rotateX(180deg) rotateZ(180deg);
}
@keyframes water {
    0% {
        background-size: 110% 100%;
    }
    25% {
        background-size: 100% 110%;
    }
    50% {
        background-size: 110% 100%;
    }
    75% {
        background-size: 100% 110%;
    }
    100% {
        background-size: 110% 100%;
    }
}

HTML

Rainbow Rain Drops 未使用Canvas，对机器计算能力要求高。

html5, 下雨动画

编辑器支持Emmet

快捷键

Rainbow Rain Drops 未使用Canvas，对机器计算能力要求高。

html5, 下雨动画

使用HTML5/Canvas模拟的病毒传播扩散动画特效

使用HTML5 CSS3模仿IOS 10的弹出消息框动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：