CSS3 + jQuery 下雨时水珠翻转动画

雨伞和旋转的水珠。

CSS3, jQuery

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Space+Mono:400,700");
@import url("https://fonts.googleapis.com/css?family=Abril+Fatface");
* {
    box-sizing: border-box;
}
*::-moz-selection {
    background-color: blue;
}
*::selection {
    background-color: blue;
}
html {
    font-size: 62.5%;
    background-color: #dce6f7;
}
body {
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #dce6f7;
}
.wrap {
    -webkit-transform-origin: center;
    transform-origin: center;
    margin: 0 auto;
    text-align: center;
    padding: 1% 2%;
    min-width: 320px;
    max-width: 470px;
    height: 80vh;
    max-height: 800px;
    overflow: hidden;
    -webkit-transform-origin: center;
    transform-origin: center;
}
.raindrop {
    display: inline-block;
    position: relative;
    z-index: 20;
    width: 4px;
    height: 4px;
    margin: 5px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
    box-shadow: 1px 1px 1px 0 blue;
    -webkit-animation: rotate2 infinite linear;
}
.raindrop:nth-of-type(1) {
    -webkit-animation-delay: 0.00962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(2) {
    -webkit-animation-delay: 0.01923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(3) {
    -webkit-animation-delay: 0.02885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(4) {
    -webkit-animation-delay: 0.03846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(5) {
    -webkit-animation-delay: 0.04808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(6) {
    -webkit-animation-delay: 0.05769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(7) {
    -webkit-animation-delay: 0.06731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(8) {
    -webkit-animation-delay: 0.07692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(9) {
    -webkit-animation-delay: 0.08654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(10) {
    -webkit-animation-delay: 0.09615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(11) {
    -webkit-animation-delay: 0.10577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(12) {
    -webkit-animation-delay: 0.11538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(13) {
    -webkit-animation-delay: 0.125s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(14) {
    -webkit-animation-delay: 0.13462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(15) {
    -webkit-animation-delay: 0.14423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(16) {
    -webkit-animation-delay: 0.15385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(17) {
    -webkit-animation-delay: 0.16346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(18) {
    -webkit-animation-delay: 0.17308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(19) {
    -webkit-animation-delay: 0.18269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(20) {
    -webkit-animation-delay: 0.19231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(21) {
    -webkit-animation-delay: 0.20192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(22) {
    -webkit-animation-delay: 0.21154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(23) {
    -webkit-animation-delay: 0.22115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(24) {
    -webkit-animation-delay: 0.23077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(25) {
    -webkit-animation-delay: 0.24038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(26) {
    -webkit-animation-delay: 0.25s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(27) {
    -webkit-animation-delay: 0.25962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(28) {
    -webkit-animation-delay: 0.26923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(29) {
    -webkit-animation-delay: 0.27885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(30) {
    -webkit-animation-delay: 0.28846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(31) {
    -webkit-animation-delay: 0.29808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(32) {
    -webkit-animation-delay: 0.30769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(33) {
    -webkit-animation-delay: 0.31731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(34) {
    -webkit-animation-delay: 0.32692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(35) {
    -webkit-animation-delay: 0.33654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(36) {
    -webkit-animation-delay: 0.34615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(37) {
    -webkit-animation-delay: 0.35577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(38) {
    -webkit-animation-delay: 0.36538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(39) {
    -webkit-animation-delay: 0.375s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(40) {
    -webkit-animation-delay: 0.38462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(41) {
    -webkit-animation-delay: 0.39423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(42) {
    -webkit-animation-delay: 0.40385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(43) {
    -webkit-animation-delay: 0.41346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(44) {
    -webkit-animation-delay: 0.42308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(45) {
    -webkit-animation-delay: 0.43269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(46) {
    -webkit-animation-delay: 0.44231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(47) {
    -webkit-animation-delay: 0.45192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(48) {
    -webkit-animation-delay: 0.46154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(49) {
    -webkit-animation-delay: 0.47115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(50) {
    -webkit-animation-delay: 0.48077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(51) {
    -webkit-animation-delay: 0.49038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(52) {
    -webkit-animation-delay: 0.5s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(53) {
    -webkit-animation-delay: 0.50962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(54) {
    -webkit-animation-delay: 0.51923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(55) {
    -webkit-animation-delay: 0.52885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(56) {
    -webkit-animation-delay: 0.53846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(57) {
    -webkit-animation-delay: 0.54808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(58) {
    -webkit-animation-delay: 0.55769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(59) {
    -webkit-animation-delay: 0.56731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(60) {
    -webkit-animation-delay: 0.57692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(61) {
    -webkit-animation-delay: 0.58654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(62) {
    -webkit-animation-delay: 0.59615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(63) {
    -webkit-animation-delay: 0.60577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(64) {
    -webkit-animation-delay: 0.61538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(65) {
    -webkit-animation-delay: 0.625s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(66) {
    -webkit-animation-delay: 0.63462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(67) {
    -webkit-animation-delay: 0.64423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(68) {
    -webkit-animation-delay: 0.65385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(69) {
    -webkit-animation-delay: 0.66346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(70) {
    -webkit-animation-delay: 0.67308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(71) {
    -webkit-animation-delay: 0.68269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(72) {
    -webkit-animation-delay: 0.69231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(73) {
    -webkit-animation-delay: 0.70192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(74) {
    -webkit-animation-delay: 0.71154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(75) {
    -webkit-animation-delay: 0.72115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(76) {
    -webkit-animation-delay: 0.73077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(77) {
    -webkit-animation-delay: 0.74038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(78) {
    -webkit-animation-delay: 0.75s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(79) {
    -webkit-animation-delay: 0.75962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(80) {
    -webkit-animation-delay: 0.76923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(81) {
    -webkit-animation-delay: 0.77885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(82) {
    -webkit-animation-delay: 0.78846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(83) {
    -webkit-animation-delay: 0.79808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(84) {
    -webkit-animation-delay: 0.80769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(85) {
    -webkit-animation-delay: 0.81731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(86) {
    -webkit-animation-delay: 0.82692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(87) {
    -webkit-animation-delay: 0.83654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(88) {
    -webkit-animation-delay: 0.84615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(89) {
    -webkit-animation-delay: 0.85577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(90) {
    -webkit-animation-delay: 0.86538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(91) {
    -webkit-animation-delay: 0.875s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(92) {
    -webkit-animation-delay: 0.88462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(93) {
    -webkit-animation-delay: 0.89423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(94) {
    -webkit-animation-delay: 0.90385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(95) {
    -webkit-animation-delay: 0.91346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(96) {
    -webkit-animation-delay: 0.92308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(97) {
    -webkit-animation-delay: 0.93269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(98) {
    -webkit-animation-delay: 0.94231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(99) {
    -webkit-animation-delay: 0.95192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(100) {
    -webkit-animation-delay: 0.96154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(101) {
    -webkit-animation-delay: 0.97115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(102) {
    -webkit-animation-delay: 0.98077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(103) {
    -webkit-animation-delay: 0.99038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(104) {
    -webkit-animation-delay: 1s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(105) {
    -webkit-animation-delay: 1.00962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(106) {
    -webkit-animation-delay: 1.01923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(107) {
    -webkit-animation-delay: 1.02885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(108) {
    -webkit-animation-delay: 1.03846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(109) {
    -webkit-animation-delay: 1.04808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(110) {
    -webkit-animation-delay: 1.05769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(111) {
    -webkit-animation-delay: 1.06731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(112) {
    -webkit-animation-delay: 1.07692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(113) {
    -webkit-animation-delay: 1.08654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(114) {
    -webkit-animation-delay: 1.09615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(115) {
    -webkit-animation-delay: 1.10577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(116) {
    -webkit-animation-delay: 1.11538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(117) {
    -webkit-animation-delay: 1.125s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(118) {
    -webkit-animation-delay: 1.13462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(119) {
    -webkit-animation-delay: 1.14423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(120) {
    -webkit-animation-delay: 1.15385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(121) {
    -webkit-animation-delay: 1.16346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(122) {
    -webkit-animation-delay: 1.17308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(123) {
    -webkit-animation-delay: 1.18269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(124) {
    -webkit-animation-delay: 1.19231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(125) {
    -webkit-animation-delay: 1.20192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(126) {
    -webkit-animation-delay: 1.21154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(127) {
    -webkit-animation-delay: 1.22115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(128) {
    -webkit-animation-delay: 1.23077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(129) {
    -webkit-animation-delay: 1.24038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(130) {
    -webkit-animation-delay: 1.25s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(131) {
    -webkit-animation-delay: 1.25962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(132) {
    -webkit-animation-delay: 1.26923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(133) {
    -webkit-animation-delay: 1.27885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(134) {
    -webkit-animation-delay: 1.28846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(135) {
    -webkit-animation-delay: 1.29808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(136) {
    -webkit-animation-delay: 1.30769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(137) {
    -webkit-animation-delay: 1.31731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(138) {
    -webkit-animation-delay: 1.32692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(139) {
    -webkit-animation-delay: 1.33654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(140) {
    -webkit-animation-delay: 1.34615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(141) {
    -webkit-animation-delay: 1.35577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(142) {
    -webkit-animation-delay: 1.36538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(143) {
    -webkit-animation-delay: 1.375s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(144) {
    -webkit-animation-delay: 1.38462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(145) {
    -webkit-animation-delay: 1.39423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(146) {
    -webkit-animation-delay: 1.40385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(147) {
    -webkit-animation-delay: 1.41346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(148) {
    -webkit-animation-delay: 1.42308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(149) {
    -webkit-animation-delay: 1.43269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(150) {
    -webkit-animation-delay: 1.44231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(151) {
    -webkit-animation-delay: 1.45192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(152) {
    -webkit-animation-delay: 1.46154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(153) {
    -webkit-animation-delay: 1.47115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(154) {
    -webkit-animation-delay: 1.48077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(155) {
    -webkit-animation-delay: 1.49038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(156) {
    -webkit-animation-delay: 1.5s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(157) {
    -webkit-animation-delay: 1.50962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(158) {
    -webkit-animation-delay: 1.51923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(159) {
    -webkit-animation-delay: 1.52885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(160) {
    -webkit-animation-delay: 1.53846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(161) {
    -webkit-animation-delay: 1.54808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(162) {
    -webkit-animation-delay: 1.55769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(163) {
    -webkit-animation-delay: 1.56731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(164) {
    -webkit-animation-delay: 1.57692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(165) {
    -webkit-animation-delay: 1.58654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(166) {
    -webkit-animation-delay: 1.59615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(167) {
    -webkit-animation-delay: 1.60577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(168) {
    -webkit-animation-delay: 1.61538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(169) {
    -webkit-animation-delay: 1.625s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(170) {
    -webkit-animation-delay: 1.63462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(171) {
    -webkit-animation-delay: 1.64423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(172) {
    -webkit-animation-delay: 1.65385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(173) {
    -webkit-animation-delay: 1.66346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(174) {
    -webkit-animation-delay: 1.67308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(175) {
    -webkit-animation-delay: 1.68269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(176) {
    -webkit-animation-delay: 1.69231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(177) {
    -webkit-animation-delay: 1.70192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(178) {
    -webkit-animation-delay: 1.71154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(179) {
    -webkit-animation-delay: 1.72115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(180) {
    -webkit-animation-delay: 1.73077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(181) {
    -webkit-animation-delay: 1.74038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(182) {
    -webkit-animation-delay: 1.75s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(183) {
    -webkit-animation-delay: 1.75962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(184) {
    -webkit-animation-delay: 1.76923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(185) {
    -webkit-animation-delay: 1.77885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(186) {
    -webkit-animation-delay: 1.78846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(187) {
    -webkit-animation-delay: 1.79808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(188) {
    -webkit-animation-delay: 1.80769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(189) {
    -webkit-animation-delay: 1.81731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(190) {
    -webkit-animation-delay: 1.82692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(191) {
    -webkit-animation-delay: 1.83654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(192) {
    -webkit-animation-delay: 1.84615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(193) {
    -webkit-animation-delay: 1.85577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(194) {
    -webkit-animation-delay: 1.86538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(195) {
    -webkit-animation-delay: 1.875s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(196) {
    -webkit-animation-delay: 1.88462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(197) {
    -webkit-animation-delay: 1.89423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(198) {
    -webkit-animation-delay: 1.90385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(199) {
    -webkit-animation-delay: 1.91346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(200) {
    -webkit-animation-delay: 1.92308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(201) {
    -webkit-animation-delay: 1.93269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(202) {
    -webkit-animation-delay: 1.94231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(203) {
    -webkit-animation-delay: 1.95192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(204) {
    -webkit-animation-delay: 1.96154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(205) {
    -webkit-animation-delay: 1.97115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(206) {
    -webkit-animation-delay: 1.98077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(207) {
    -webkit-animation-delay: 1.99038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(208) {
    -webkit-animation-delay: 2s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(209) {
    -webkit-animation-delay: 2.00962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(210) {
    -webkit-animation-delay: 2.01923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(211) {
    -webkit-animation-delay: 2.02885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(212) {
    -webkit-animation-delay: 2.03846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(213) {
    -webkit-animation-delay: 2.04808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(214) {
    -webkit-animation-delay: 2.05769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(215) {
    -webkit-animation-delay: 2.06731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(216) {
    -webkit-animation-delay: 2.07692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(217) {
    -webkit-animation-delay: 2.08654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(218) {
    -webkit-animation-delay: 2.09615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(219) {
    -webkit-animation-delay: 2.10577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(220) {
    -webkit-animation-delay: 2.11538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(221) {
    -webkit-animation-delay: 2.125s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(222) {
    -webkit-animation-delay: 2.13462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(223) {
    -webkit-animation-delay: 2.14423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(224) {
    -webkit-animation-delay: 2.15385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(225) {
    -webkit-animation-delay: 2.16346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(226) {
    -webkit-animation-delay: 2.17308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(227) {
    -webkit-animation-delay: 2.18269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(228) {
    -webkit-animation-delay: 2.19231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(229) {
    -webkit-animation-delay: 2.20192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(230) {
    -webkit-animation-delay: 2.21154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(231) {
    -webkit-animation-delay: 2.22115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(232) {
    -webkit-animation-delay: 2.23077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(233) {
    -webkit-animation-delay: 2.24038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(234) {
    -webkit-animation-delay: 2.25s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(235) {
    -webkit-animation-delay: 2.25962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(236) {
    -webkit-animation-delay: 2.26923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(237) {
    -webkit-animation-delay: 2.27885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(238) {
    -webkit-animation-delay: 2.28846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(239) {
    -webkit-animation-delay: 2.29808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(240) {
    -webkit-animation-delay: 2.30769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(241) {
    -webkit-animation-delay: 2.31731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(242) {
    -webkit-animation-delay: 2.32692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(243) {
    -webkit-animation-delay: 2.33654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(244) {
    -webkit-animation-delay: 2.34615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(245) {
    -webkit-animation-delay: 2.35577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(246) {
    -webkit-animation-delay: 2.36538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(247) {
    -webkit-animation-delay: 2.375s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(248) {
    -webkit-animation-delay: 2.38462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(249) {
    -webkit-animation-delay: 2.39423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(250) {
    -webkit-animation-delay: 2.40385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(251) {
    -webkit-animation-delay: 2.41346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(252) {
    -webkit-animation-delay: 2.42308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(253) {
    -webkit-animation-delay: 2.43269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(254) {
    -webkit-animation-delay: 2.44231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(255) {
    -webkit-animation-delay: 2.45192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(256) {
    -webkit-animation-delay: 2.46154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(257) {
    -webkit-animation-delay: 2.47115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(258) {
    -webkit-animation-delay: 2.48077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(259) {
    -webkit-animation-delay: 2.49038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(260) {
    -webkit-animation-delay: 2.5s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(261) {
    -webkit-animation-delay: 2.50962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(262) {
    -webkit-animation-delay: 2.51923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(263) {
    -webkit-animation-delay: 2.52885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(264) {
    -webkit-animation-delay: 2.53846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(265) {
    -webkit-animation-delay: 2.54808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(266) {
    -webkit-animation-delay: 2.55769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(267) {
    -webkit-animation-delay: 2.56731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(268) {
    -webkit-animation-delay: 2.57692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(269) {
    -webkit-animation-delay: 2.58654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(270) {
    -webkit-animation-delay: 2.59615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(271) {
    -webkit-animation-delay: 2.60577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(272) {
    -webkit-animation-delay: 2.61538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(273) {
    -webkit-animation-delay: 2.625s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(274) {
    -webkit-animation-delay: 2.63462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(275) {
    -webkit-animation-delay: 2.64423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(276) {
    -webkit-animation-delay: 2.65385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(277) {
    -webkit-animation-delay: 2.66346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(278) {
    -webkit-animation-delay: 2.67308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(279) {
    -webkit-animation-delay: 2.68269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(280) {
    -webkit-animation-delay: 2.69231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(281) {
    -webkit-animation-delay: 2.70192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(282) {
    -webkit-animation-delay: 2.71154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(283) {
    -webkit-animation-delay: 2.72115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(284) {
    -webkit-animation-delay: 2.73077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(285) {
    -webkit-animation-delay: 2.74038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(286) {
    -webkit-animation-delay: 2.75s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(287) {
    -webkit-animation-delay: 2.75962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(288) {
    -webkit-animation-delay: 2.76923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(289) {
    -webkit-animation-delay: 2.77885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(290) {
    -webkit-animation-delay: 2.78846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(291) {
    -webkit-animation-delay: 2.79808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(292) {
    -webkit-animation-delay: 2.80769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(293) {
    -webkit-animation-delay: 2.81731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(294) {
    -webkit-animation-delay: 2.82692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(295) {
    -webkit-animation-delay: 2.83654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(296) {
    -webkit-animation-delay: 2.84615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(297) {
    -webkit-animation-delay: 2.85577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(298) {
    -webkit-animation-delay: 2.86538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(299) {
    -webkit-animation-delay: 2.875s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(300) {
    -webkit-animation-delay: 2.88462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(301) {
    -webkit-animation-delay: 2.89423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(302) {
    -webkit-animation-delay: 2.90385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(303) {
    -webkit-animation-delay: 2.91346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(304) {
    -webkit-animation-delay: 2.92308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(305) {
    -webkit-animation-delay: 2.93269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(306) {
    -webkit-animation-delay: 2.94231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(307) {
    -webkit-animation-delay: 2.95192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(308) {
    -webkit-animation-delay: 2.96154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(309) {
    -webkit-animation-delay: 2.97115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(310) {
    -webkit-animation-delay: 2.98077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(311) {
    -webkit-animation-delay: 2.99038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(312) {
    -webkit-animation-delay: 3s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(313) {
    -webkit-animation-delay: 3.00962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(314) {
    -webkit-animation-delay: 3.01923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(315) {
    -webkit-animation-delay: 3.02885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(316) {
    -webkit-animation-delay: 3.03846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(317) {
    -webkit-animation-delay: 3.04808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(318) {
    -webkit-animation-delay: 3.05769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(319) {
    -webkit-animation-delay: 3.06731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(320) {
    -webkit-animation-delay: 3.07692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(321) {
    -webkit-animation-delay: 3.08654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(322) {
    -webkit-animation-delay: 3.09615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(323) {
    -webkit-animation-delay: 3.10577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(324) {
    -webkit-animation-delay: 3.11538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(325) {
    -webkit-animation-delay: 3.125s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(326) {
    -webkit-animation-delay: 3.13462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(327) {
    -webkit-animation-delay: 3.14423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(328) {
    -webkit-animation-delay: 3.15385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(329) {
    -webkit-animation-delay: 3.16346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(330) {
    -webkit-animation-delay: 3.17308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(331) {
    -webkit-animation-delay: 3.18269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(332) {
    -webkit-animation-delay: 3.19231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(333) {
    -webkit-animation-delay: 3.20192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(334) {
    -webkit-animation-delay: 3.21154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(335) {
    -webkit-animation-delay: 3.22115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(336) {
    -webkit-animation-delay: 3.23077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(337) {
    -webkit-animation-delay: 3.24038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(338) {
    -webkit-animation-delay: 3.25s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(339) {
    -webkit-animation-delay: 3.25962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(340) {
    -webkit-animation-delay: 3.26923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(341) {
    -webkit-animation-delay: 3.27885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(342) {
    -webkit-animation-delay: 3.28846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(343) {
    -webkit-animation-delay: 3.29808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(344) {
    -webkit-animation-delay: 3.30769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(345) {
    -webkit-animation-delay: 3.31731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(346) {
    -webkit-animation-delay: 3.32692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(347) {
    -webkit-animation-delay: 3.33654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(348) {
    -webkit-animation-delay: 3.34615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(349) {
    -webkit-animation-delay: 3.35577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(350) {
    -webkit-animation-delay: 3.36538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(351) {
    -webkit-animation-delay: 3.375s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(352) {
    -webkit-animation-delay: 3.38462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(353) {
    -webkit-animation-delay: 3.39423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(354) {
    -webkit-animation-delay: 3.40385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(355) {
    -webkit-animation-delay: 3.41346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(356) {
    -webkit-animation-delay: 3.42308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(357) {
    -webkit-animation-delay: 3.43269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(358) {
    -webkit-animation-delay: 3.44231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(359) {
    -webkit-animation-delay: 3.45192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(360) {
    -webkit-animation-delay: 3.46154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(361) {
    -webkit-animation-delay: 3.47115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(362) {
    -webkit-animation-delay: 3.48077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(363) {
    -webkit-animation-delay: 3.49038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(364) {
    -webkit-animation-delay: 3.5s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(365) {
    -webkit-animation-delay: 3.50962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(366) {
    -webkit-animation-delay: 3.51923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(367) {
    -webkit-animation-delay: 3.52885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(368) {
    -webkit-animation-delay: 3.53846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(369) {
    -webkit-animation-delay: 3.54808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(370) {
    -webkit-animation-delay: 3.55769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(371) {
    -webkit-animation-delay: 3.56731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(372) {
    -webkit-animation-delay: 3.57692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(373) {
    -webkit-animation-delay: 3.58654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(374) {
    -webkit-animation-delay: 3.59615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(375) {
    -webkit-animation-delay: 3.60577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(376) {
    -webkit-animation-delay: 3.61538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(377) {
    -webkit-animation-delay: 3.625s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(378) {
    -webkit-animation-delay: 3.63462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(379) {
    -webkit-animation-delay: 3.64423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(380) {
    -webkit-animation-delay: 3.65385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(381) {
    -webkit-animation-delay: 3.66346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(382) {
    -webkit-animation-delay: 3.67308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(383) {
    -webkit-animation-delay: 3.68269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(384) {
    -webkit-animation-delay: 3.69231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(385) {
    -webkit-animation-delay: 3.70192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(386) {
    -webkit-animation-delay: 3.71154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(387) {
    -webkit-animation-delay: 3.72115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(388) {
    -webkit-animation-delay: 3.73077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(389) {
    -webkit-animation-delay: 3.74038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(390) {
    -webkit-animation-delay: 3.75s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(391) {
    -webkit-animation-delay: 3.75962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(392) {
    -webkit-animation-delay: 3.76923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(393) {
    -webkit-animation-delay: 3.77885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(394) {
    -webkit-animation-delay: 3.78846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(395) {
    -webkit-animation-delay: 3.79808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(396) {
    -webkit-animation-delay: 3.80769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(397) {
    -webkit-animation-delay: 3.81731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(398) {
    -webkit-animation-delay: 3.82692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(399) {
    -webkit-animation-delay: 3.83654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(400) {
    -webkit-animation-delay: 3.84615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(401) {
    -webkit-animation-delay: 3.85577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(402) {
    -webkit-animation-delay: 3.86538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(403) {
    -webkit-animation-delay: 3.875s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(404) {
    -webkit-animation-delay: 3.88462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(405) {
    -webkit-animation-delay: 3.89423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(406) {
    -webkit-animation-delay: 3.90385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(407) {
    -webkit-animation-delay: 3.91346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(408) {
    -webkit-animation-delay: 3.92308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(409) {
    -webkit-animation-delay: 3.93269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(410) {
    -webkit-animation-delay: 3.94231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(411) {
    -webkit-animation-delay: 3.95192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(412) {
    -webkit-animation-delay: 3.96154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(413) {
    -webkit-animation-delay: 3.97115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(414) {
    -webkit-animation-delay: 3.98077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(415) {
    -webkit-animation-delay: 3.99038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(416) {
    -webkit-animation-delay: 4s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(417) {
    -webkit-animation-delay: 4.00962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(418) {
    -webkit-animation-delay: 4.01923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(419) {
    -webkit-animation-delay: 4.02885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(420) {
    -webkit-animation-delay: 4.03846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(421) {
    -webkit-animation-delay: 4.04808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(422) {
    -webkit-animation-delay: 4.05769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(423) {
    -webkit-animation-delay: 4.06731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(424) {
    -webkit-animation-delay: 4.07692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(425) {
    -webkit-animation-delay: 4.08654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(426) {
    -webkit-animation-delay: 4.09615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(427) {
    -webkit-animation-delay: 4.10577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(428) {
    -webkit-animation-delay: 4.11538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(429) {
    -webkit-animation-delay: 4.125s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(430) {
    -webkit-animation-delay: 4.13462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(431) {
    -webkit-animation-delay: 4.14423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(432) {
    -webkit-animation-delay: 4.15385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(433) {
    -webkit-animation-delay: 4.16346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(434) {
    -webkit-animation-delay: 4.17308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(435) {
    -webkit-animation-delay: 4.18269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(436) {
    -webkit-animation-delay: 4.19231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(437) {
    -webkit-animation-delay: 4.20192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(438) {
    -webkit-animation-delay: 4.21154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(439) {
    -webkit-animation-delay: 4.22115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(440) {
    -webkit-animation-delay: 4.23077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(441) {
    -webkit-animation-delay: 4.24038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(442) {
    -webkit-animation-delay: 4.25s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(443) {
    -webkit-animation-delay: 4.25962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(444) {
    -webkit-animation-delay: 4.26923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(445) {
    -webkit-animation-delay: 4.27885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(446) {
    -webkit-animation-delay: 4.28846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(447) {
    -webkit-animation-delay: 4.29808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(448) {
    -webkit-animation-delay: 4.30769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(449) {
    -webkit-animation-delay: 4.31731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(450) {
    -webkit-animation-delay: 4.32692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(451) {
    -webkit-animation-delay: 4.33654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(452) {
    -webkit-animation-delay: 4.34615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(453) {
    -webkit-animation-delay: 4.35577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(454) {
    -webkit-animation-delay: 4.36538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(455) {
    -webkit-animation-delay: 4.375s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(456) {
    -webkit-animation-delay: 4.38462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(457) {
    -webkit-animation-delay: 4.39423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(458) {
    -webkit-animation-delay: 4.40385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(459) {
    -webkit-animation-delay: 4.41346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(460) {
    -webkit-animation-delay: 4.42308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(461) {
    -webkit-animation-delay: 4.43269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(462) {
    -webkit-animation-delay: 4.44231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(463) {
    -webkit-animation-delay: 4.45192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(464) {
    -webkit-animation-delay: 4.46154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(465) {
    -webkit-animation-delay: 4.47115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(466) {
    -webkit-animation-delay: 4.48077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(467) {
    -webkit-animation-delay: 4.49038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(468) {
    -webkit-animation-delay: 4.5s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(469) {
    -webkit-animation-delay: 4.50962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(470) {
    -webkit-animation-delay: 4.51923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(471) {
    -webkit-animation-delay: 4.52885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(472) {
    -webkit-animation-delay: 4.53846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(473) {
    -webkit-animation-delay: 4.54808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(474) {
    -webkit-animation-delay: 4.55769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(475) {
    -webkit-animation-delay: 4.56731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(476) {
    -webkit-animation-delay: 4.57692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(477) {
    -webkit-animation-delay: 4.58654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(478) {
    -webkit-animation-delay: 4.59615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(479) {
    -webkit-animation-delay: 4.60577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(480) {
    -webkit-animation-delay: 4.61538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(481) {
    -webkit-animation-delay: 4.625s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(482) {
    -webkit-animation-delay: 4.63462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(483) {
    -webkit-animation-delay: 4.64423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(484) {
    -webkit-animation-delay: 4.65385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(485) {
    -webkit-animation-delay: 4.66346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(486) {
    -webkit-animation-delay: 4.67308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(487) {
    -webkit-animation-delay: 4.68269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(488) {
    -webkit-animation-delay: 4.69231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(489) {
    -webkit-animation-delay: 4.70192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(490) {
    -webkit-animation-delay: 4.71154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(491) {
    -webkit-animation-delay: 4.72115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(492) {
    -webkit-animation-delay: 4.73077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(493) {
    -webkit-animation-delay: 4.74038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(494) {
    -webkit-animation-delay: 4.75s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(495) {
    -webkit-animation-delay: 4.75962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(496) {
    -webkit-animation-delay: 4.76923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(497) {
    -webkit-animation-delay: 4.77885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(498) {
    -webkit-animation-delay: 4.78846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(499) {
    -webkit-animation-delay: 4.79808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(500) {
    -webkit-animation-delay: 4.80769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(501) {
    -webkit-animation-delay: 4.81731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(502) {
    -webkit-animation-delay: 4.82692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(503) {
    -webkit-animation-delay: 4.83654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(504) {
    -webkit-animation-delay: 4.84615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(505) {
    -webkit-animation-delay: 4.85577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(506) {
    -webkit-animation-delay: 4.86538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(507) {
    -webkit-animation-delay: 4.875s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(508) {
    -webkit-animation-delay: 4.88462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(509) {
    -webkit-animation-delay: 4.89423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(510) {
    -webkit-animation-delay: 4.90385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(511) {
    -webkit-animation-delay: 4.91346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(512) {
    -webkit-animation-delay: 4.92308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(513) {
    -webkit-animation-delay: 4.93269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(514) {
    -webkit-animation-delay: 4.94231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(515) {
    -webkit-animation-delay: 4.95192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(516) {
    -webkit-animation-delay: 4.96154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(517) {
    -webkit-animation-delay: 4.97115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(518) {
    -webkit-animation-delay: 4.98077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(519) {
    -webkit-animation-delay: 4.99038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(520) {
    -webkit-animation-delay: 5s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(521) {
    -webkit-animation-delay: 5.00962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(522) {
    -webkit-animation-delay: 5.01923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(523) {
    -webkit-animation-delay: 5.02885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(524) {
    -webkit-animation-delay: 5.03846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(525) {
    -webkit-animation-delay: 5.04808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(526) {
    -webkit-animation-delay: 5.05769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(527) {
    -webkit-animation-delay: 5.06731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(528) {
    -webkit-animation-delay: 5.07692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(529) {
    -webkit-animation-delay: 5.08654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(530) {
    -webkit-animation-delay: 5.09615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(531) {
    -webkit-animation-delay: 5.10577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(532) {
    -webkit-animation-delay: 5.11538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(533) {
    -webkit-animation-delay: 5.125s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(534) {
    -webkit-animation-delay: 5.13462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(535) {
    -webkit-animation-delay: 5.14423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(536) {
    -webkit-animation-delay: 5.15385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(537) {
    -webkit-animation-delay: 5.16346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(538) {
    -webkit-animation-delay: 5.17308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(539) {
    -webkit-animation-delay: 5.18269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(540) {
    -webkit-animation-delay: 5.19231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(541) {
    -webkit-animation-delay: 5.20192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(542) {
    -webkit-animation-delay: 5.21154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(543) {
    -webkit-animation-delay: 5.22115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(544) {
    -webkit-animation-delay: 5.23077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(545) {
    -webkit-animation-delay: 5.24038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(546) {
    -webkit-animation-delay: 5.25s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(547) {
    -webkit-animation-delay: 5.25962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(548) {
    -webkit-animation-delay: 5.26923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(549) {
    -webkit-animation-delay: 5.27885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(550) {
    -webkit-animation-delay: 5.28846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(551) {
    -webkit-animation-delay: 5.29808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(552) {
    -webkit-animation-delay: 5.30769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(553) {
    -webkit-animation-delay: 5.31731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(554) {
    -webkit-animation-delay: 5.32692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(555) {
    -webkit-animation-delay: 5.33654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(556) {
    -webkit-animation-delay: 5.34615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(557) {
    -webkit-animation-delay: 5.35577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(558) {
    -webkit-animation-delay: 5.36538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(559) {
    -webkit-animation-delay: 5.375s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(560) {
    -webkit-animation-delay: 5.38462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(561) {
    -webkit-animation-delay: 5.39423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(562) {
    -webkit-animation-delay: 5.40385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(563) {
    -webkit-animation-delay: 5.41346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(564) {
    -webkit-animation-delay: 5.42308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(565) {
    -webkit-animation-delay: 5.43269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(566) {
    -webkit-animation-delay: 5.44231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(567) {
    -webkit-animation-delay: 5.45192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(568) {
    -webkit-animation-delay: 5.46154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(569) {
    -webkit-animation-delay: 5.47115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(570) {
    -webkit-animation-delay: 5.48077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(571) {
    -webkit-animation-delay: 5.49038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(572) {
    -webkit-animation-delay: 5.5s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(573) {
    -webkit-animation-delay: 5.50962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(574) {
    -webkit-animation-delay: 5.51923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(575) {
    -webkit-animation-delay: 5.52885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(576) {
    -webkit-animation-delay: 5.53846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(577) {
    -webkit-animation-delay: 5.54808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(578) {
    -webkit-animation-delay: 5.55769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(579) {
    -webkit-animation-delay: 5.56731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(580) {
    -webkit-animation-delay: 5.57692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(581) {
    -webkit-animation-delay: 5.58654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(582) {
    -webkit-animation-delay: 5.59615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(583) {
    -webkit-animation-delay: 5.60577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(584) {
    -webkit-animation-delay: 5.61538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(585) {
    -webkit-animation-delay: 5.625s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(586) {
    -webkit-animation-delay: 5.63462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(587) {
    -webkit-animation-delay: 5.64423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(588) {
    -webkit-animation-delay: 5.65385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(589) {
    -webkit-animation-delay: 5.66346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(590) {
    -webkit-animation-delay: 5.67308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(591) {
    -webkit-animation-delay: 5.68269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(592) {
    -webkit-animation-delay: 5.69231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(593) {
    -webkit-animation-delay: 5.70192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(594) {
    -webkit-animation-delay: 5.71154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(595) {
    -webkit-animation-delay: 5.72115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(596) {
    -webkit-animation-delay: 5.73077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(597) {
    -webkit-animation-delay: 5.74038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(598) {
    -webkit-animation-delay: 5.75s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(599) {
    -webkit-animation-delay: 5.75962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(600) {
    -webkit-animation-delay: 5.76923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(601) {
    -webkit-animation-delay: 5.77885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(602) {
    -webkit-animation-delay: 5.78846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(603) {
    -webkit-animation-delay: 5.79808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(604) {
    -webkit-animation-delay: 5.80769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(605) {
    -webkit-animation-delay: 5.81731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(606) {
    -webkit-animation-delay: 5.82692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(607) {
    -webkit-animation-delay: 5.83654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(608) {
    -webkit-animation-delay: 5.84615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(609) {
    -webkit-animation-delay: 5.85577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(610) {
    -webkit-animation-delay: 5.86538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(611) {
    -webkit-animation-delay: 5.875s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(612) {
    -webkit-animation-delay: 5.88462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(613) {
    -webkit-animation-delay: 5.89423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(614) {
    -webkit-animation-delay: 5.90385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(615) {
    -webkit-animation-delay: 5.91346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(616) {
    -webkit-animation-delay: 5.92308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(617) {
    -webkit-animation-delay: 5.93269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(618) {
    -webkit-animation-delay: 5.94231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(619) {
    -webkit-animation-delay: 5.95192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(620) {
    -webkit-animation-delay: 5.96154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(621) {
    -webkit-animation-delay: 5.97115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(622) {
    -webkit-animation-delay: 5.98077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(623) {
    -webkit-animation-delay: 5.99038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(624) {
    -webkit-animation-delay: 6s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(625) {
    -webkit-animation-delay: 6.00962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(626) {
    -webkit-animation-delay: 6.01923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(627) {
    -webkit-animation-delay: 6.02885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(628) {
    -webkit-animation-delay: 6.03846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(629) {
    -webkit-animation-delay: 6.04808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(630) {
    -webkit-animation-delay: 6.05769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(631) {
    -webkit-animation-delay: 6.06731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(632) {
    -webkit-animation-delay: 6.07692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(633) {
    -webkit-animation-delay: 6.08654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(634) {
    -webkit-animation-delay: 6.09615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(635) {
    -webkit-animation-delay: 6.10577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(636) {
    -webkit-animation-delay: 6.11538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(637) {
    -webkit-animation-delay: 6.125s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(638) {
    -webkit-animation-delay: 6.13462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(639) {
    -webkit-animation-delay: 6.14423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(640) {
    -webkit-animation-delay: 6.15385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(641) {
    -webkit-animation-delay: 6.16346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(642) {
    -webkit-animation-delay: 6.17308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(643) {
    -webkit-animation-delay: 6.18269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(644) {
    -webkit-animation-delay: 6.19231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(645) {
    -webkit-animation-delay: 6.20192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(646) {
    -webkit-animation-delay: 6.21154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(647) {
    -webkit-animation-delay: 6.22115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(648) {
    -webkit-animation-delay: 6.23077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(649) {
    -webkit-animation-delay: 6.24038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(650) {
    -webkit-animation-delay: 6.25s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(651) {
    -webkit-animation-delay: 6.25962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(652) {
    -webkit-animation-delay: 6.26923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(653) {
    -webkit-animation-delay: 6.27885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(654) {
    -webkit-animation-delay: 6.28846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(655) {
    -webkit-animation-delay: 6.29808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(656) {
    -webkit-animation-delay: 6.30769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(657) {
    -webkit-animation-delay: 6.31731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(658) {
    -webkit-animation-delay: 6.32692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(659) {
    -webkit-animation-delay: 6.33654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(660) {
    -webkit-animation-delay: 6.34615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(661) {
    -webkit-animation-delay: 6.35577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(662) {
    -webkit-animation-delay: 6.36538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(663) {
    -webkit-animation-delay: 6.375s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(664) {
    -webkit-animation-delay: 6.38462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(665) {
    -webkit-animation-delay: 6.39423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(666) {
    -webkit-animation-delay: 6.40385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(667) {
    -webkit-animation-delay: 6.41346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(668) {
    -webkit-animation-delay: 6.42308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(669) {
    -webkit-animation-delay: 6.43269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(670) {
    -webkit-animation-delay: 6.44231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(671) {
    -webkit-animation-delay: 6.45192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(672) {
    -webkit-animation-delay: 6.46154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(673) {
    -webkit-animation-delay: 6.47115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(674) {
    -webkit-animation-delay: 6.48077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(675) {
    -webkit-animation-delay: 6.49038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(676) {
    -webkit-animation-delay: 6.5s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(677) {
    -webkit-animation-delay: 6.50962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(678) {
    -webkit-animation-delay: 6.51923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(679) {
    -webkit-animation-delay: 6.52885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(680) {
    -webkit-animation-delay: 6.53846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(681) {
    -webkit-animation-delay: 6.54808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(682) {
    -webkit-animation-delay: 6.55769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(683) {
    -webkit-animation-delay: 6.56731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(684) {
    -webkit-animation-delay: 6.57692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(685) {
    -webkit-animation-delay: 6.58654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(686) {
    -webkit-animation-delay: 6.59615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(687) {
    -webkit-animation-delay: 6.60577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(688) {
    -webkit-animation-delay: 6.61538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(689) {
    -webkit-animation-delay: 6.625s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(690) {
    -webkit-animation-delay: 6.63462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(691) {
    -webkit-animation-delay: 6.64423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(692) {
    -webkit-animation-delay: 6.65385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(693) {
    -webkit-animation-delay: 6.66346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(694) {
    -webkit-animation-delay: 6.67308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(695) {
    -webkit-animation-delay: 6.68269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(696) {
    -webkit-animation-delay: 6.69231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(697) {
    -webkit-animation-delay: 6.70192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(698) {
    -webkit-animation-delay: 6.71154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(699) {
    -webkit-animation-delay: 6.72115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(700) {
    -webkit-animation-delay: 6.73077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(701) {
    -webkit-animation-delay: 6.74038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(702) {
    -webkit-animation-delay: 6.75s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(703) {
    -webkit-animation-delay: 6.75962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(704) {
    -webkit-animation-delay: 6.76923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(705) {
    -webkit-animation-delay: 6.77885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(706) {
    -webkit-animation-delay: 6.78846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(707) {
    -webkit-animation-delay: 6.79808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(708) {
    -webkit-animation-delay: 6.80769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(709) {
    -webkit-animation-delay: 6.81731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(710) {
    -webkit-animation-delay: 6.82692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(711) {
    -webkit-animation-delay: 6.83654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(712) {
    -webkit-animation-delay: 6.84615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(713) {
    -webkit-animation-delay: 6.85577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(714) {
    -webkit-animation-delay: 6.86538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(715) {
    -webkit-animation-delay: 6.875s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(716) {
    -webkit-animation-delay: 6.88462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(717) {
    -webkit-animation-delay: 6.89423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(718) {
    -webkit-animation-delay: 6.90385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(719) {
    -webkit-animation-delay: 6.91346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(720) {
    -webkit-animation-delay: 6.92308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(721) {
    -webkit-animation-delay: 6.93269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(722) {
    -webkit-animation-delay: 6.94231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(723) {
    -webkit-animation-delay: 6.95192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(724) {
    -webkit-animation-delay: 6.96154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(725) {
    -webkit-animation-delay: 6.97115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(726) {
    -webkit-animation-delay: 6.98077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(727) {
    -webkit-animation-delay: 6.99038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(728) {
    -webkit-animation-delay: 7s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(729) {
    -webkit-animation-delay: 7.00962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(730) {
    -webkit-animation-delay: 7.01923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(731) {
    -webkit-animation-delay: 7.02885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(732) {
    -webkit-animation-delay: 7.03846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(733) {
    -webkit-animation-delay: 7.04808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(734) {
    -webkit-animation-delay: 7.05769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(735) {
    -webkit-animation-delay: 7.06731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(736) {
    -webkit-animation-delay: 7.07692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(737) {
    -webkit-animation-delay: 7.08654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(738) {
    -webkit-animation-delay: 7.09615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(739) {
    -webkit-animation-delay: 7.10577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(740) {
    -webkit-animation-delay: 7.11538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(741) {
    -webkit-animation-delay: 7.125s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(742) {
    -webkit-animation-delay: 7.13462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(743) {
    -webkit-animation-delay: 7.14423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(744) {
    -webkit-animation-delay: 7.15385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(745) {
    -webkit-animation-delay: 7.16346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(746) {
    -webkit-animation-delay: 7.17308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(747) {
    -webkit-animation-delay: 7.18269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(748) {
    -webkit-animation-delay: 7.19231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(749) {
    -webkit-animation-delay: 7.20192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(750) {
    -webkit-animation-delay: 7.21154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(751) {
    -webkit-animation-delay: 7.22115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(752) {
    -webkit-animation-delay: 7.23077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(753) {
    -webkit-animation-delay: 7.24038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(754) {
    -webkit-animation-delay: 7.25s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(755) {
    -webkit-animation-delay: 7.25962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(756) {
    -webkit-animation-delay: 7.26923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(757) {
    -webkit-animation-delay: 7.27885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(758) {
    -webkit-animation-delay: 7.28846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(759) {
    -webkit-animation-delay: 7.29808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(760) {
    -webkit-animation-delay: 7.30769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(761) {
    -webkit-animation-delay: 7.31731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(762) {
    -webkit-animation-delay: 7.32692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(763) {
    -webkit-animation-delay: 7.33654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(764) {
    -webkit-animation-delay: 7.34615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(765) {
    -webkit-animation-delay: 7.35577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(766) {
    -webkit-animation-delay: 7.36538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(767) {
    -webkit-animation-delay: 7.375s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(768) {
    -webkit-animation-delay: 7.38462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(769) {
    -webkit-animation-delay: 7.39423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(770) {
    -webkit-animation-delay: 7.40385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(771) {
    -webkit-animation-delay: 7.41346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(772) {
    -webkit-animation-delay: 7.42308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(773) {
    -webkit-animation-delay: 7.43269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(774) {
    -webkit-animation-delay: 7.44231s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(775) {
    -webkit-animation-delay: 7.45192s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(776) {
    -webkit-animation-delay: 7.46154s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(777) {
    -webkit-animation-delay: 7.47115s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(778) {
    -webkit-animation-delay: 7.48077s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(779) {
    -webkit-animation-delay: 7.49038s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(780) {
    -webkit-animation-delay: 7.5s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(781) {
    -webkit-animation-delay: 7.50962s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(782) {
    -webkit-animation-delay: 7.51923s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(783) {
    -webkit-animation-delay: 7.52885s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(784) {
    -webkit-animation-delay: 7.53846s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(785) {
    -webkit-animation-delay: 7.54808s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(786) {
    -webkit-animation-delay: 7.55769s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(787) {
    -webkit-animation-delay: 7.56731s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(788) {
    -webkit-animation-delay: 7.57692s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(789) {
    -webkit-animation-delay: 7.58654s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(790) {
    -webkit-animation-delay: 7.59615s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(791) {
    -webkit-animation-delay: 7.60577s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(792) {
    -webkit-animation-delay: 7.61538s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(793) {
    -webkit-animation-delay: 7.625s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(794) {
    -webkit-animation-delay: 7.63462s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(795) {
    -webkit-animation-delay: 7.64423s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(796) {
    -webkit-animation-delay: 7.65385s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(797) {
    -webkit-animation-delay: 7.66346s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(798) {
    -webkit-animation-delay: 7.67308s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(799) {
    -webkit-animation-delay: 7.68269s;
    -webkit-animation-duration: 2.0025s;
}
.raindrop:nth-of-type(800) {
    -webkit-animation-delay: 7.69231s;
    -webkit-animation-duration: 2.0025s;
}
#weather {
    position: fixed;
}
#weather li {
    -webkit-transform-origin: center;
    transform-origin: center;
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-size: 1.5rem;
    position: inherit;
    list-style-type: none;
}
#weather .rains {
    top: 5px;
    left: 10px;
}
#weather .pours {
    bottom: 5px;
    right: 10px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
#weather .temp {
    display: none;
    bottom: 15px;
    right: 0px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
#weather .city {
    top: 5px;
    right: 5px;
}
#weather .type {
    top: 8px;
    right: 10px;
}
#weather .wind {
    bottom: 5px;
    left: 14px;
}
#umbrella {
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 9999;
    width: 30px;
    -webkit-animation: rotate1 10s infinite linear;
    animation: rotate1 10s infinite linear;
    opacity: .8;
}
@-webkit-keyframes rotate1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    80% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

HTML

雨伞和旋转的水珠。

CSS3, jQuery

编辑器支持Emmet

快捷键

雨伞和旋转的水珠。

CSS3, jQuery

CSS3+jQuery 有色液体水珠互换型沙漏斗动画

CSS3+jQuery 响应式动画式饼图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：