div+css逼真悬浮风向的下雨动画代码
代码语言:html
所属分类:动画
代码描述:div+css逼真悬浮风向的下雨动画代码,鼠标悬浮罗盘改变风向。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @property --angle { syntax: "<angle>"; inherits: false; initial-value: 91deg; } body { width: 100vw; height: 100vh; margin: 0; padding: 0; overflow: hidden; background: linear-gradient(180deg, #07131c, #305472); } body:before, body:after { content: "CLICK & HOLD TO CREATE LIGHTNING"; font-family: Arial, Helvetica, serif; font-size: 12px; position: absolute; width: 100%; text-align: center; bottom: 18px; color: #fff4; z-index: -1; } body:before { content: "HOVER SCREEN TO CHANGE WIND SPEED"; top: 18px; } body:active:after { color: #fff0; transition: all 0.5s ease 0s; } .rain { position: absolute; width: 120vw; height: 100vh; cursor: pointer; z-index: 0; left: -10vw; } .rain .left, .rain .right { width: 20vw; height: 100vh; left: 10vw; position: absolute; box-sizing: border-box; z-index: 2; } .rain .left:hover ~ .drop { --angle: 105deg; } .rain .left:hover ~ .right:after { transform: rotate(22deg); transition: all 0.5s ease 0s; } .rain .right { left: initial; right: 10vw; } .rain .right:after { content: "△\a▼"; position: fixed; text-indent: 1px; left: calc(50% - 30px); top: 45px; color: #fff8; font-size: 20px; border: 2px dashed #fff3; border-radius: 100%; width: 60px; height: 60px; box-sizing: border-box; padding: 13px 18px; text-align: center; line-height: 15px; transition: all 0.5s ease 0s; white-space: pre-wrap; } .rain .right:hover:after { transform: rotate(-22deg); transition: all 0.5s ease 0s; } .rain .right:hover ~ .drop { --angle: 75deg; } .rain .right.center { right: 30vw; } .rain .right.center:after { display: none; } .rain .right.center:hover ~ .drop { --angle: 85deg; } .rain .right.center:hover ~ .right:after { transform: rotate(-12deg); transition: all 0.5s ease 0s; } .rain .left.center { left: 30vw; } .rain .left.center:hover ~ .drop { --angle: 95deg; } .rain .left.center:hover ~ .right:after { transform: rotate(12deg); transition: all 0.5s ease 0s; } .rain:active { cursor: none; animation: lightning 0.1s linear 0s 2, lightning 0.15s ease-out 0.25s 1; } @keyframes lightning { 50% { background: radial-gradient(circle at calc(50% - 10vw) -20%, #fff4, #fff0 20%), linear-gradient(180deg, #fff9, #fff3); } } .drop { border: 0.25vmin solid transparent; border-bottom-color: #abc2e9; position: absolute; top: -5vmin; --angle: 91deg; } .drop:nth-child(1) { opacity: 0.54; left: 29.7vw; border-left-width: 0.1vmin; animation: fall-1 1.65s -11.5s ease-in infinite; } @keyframes fall-1 { 5% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(2) { opacity: 0.1; left: 42.2vw; border-left-width: 5.1vmin; animation: fall-2 1.35s -7.5s ease-in infinite; } @keyframes fall-2 { 7.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(3) { opacity: 0.08; left: 108.4vw; border-left-width: 7vmin; animation: fall-3 0.75s -2.5s ease-in infinite; } @keyframes fall-3 { 9.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(4) { opacity: 0.06; left: 82.3vw; border-left-width: 7.2vmin; animation: fall-4 1.8s -5s ease-in infinite; } @keyframes fall-4 { 0.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(5) { opacity: 0.85; left: 77.8vw; border-left-width: 3.2vmin; animation: fall-5 1.35s -3s ease-in infinite; } @keyframes fall-5 { 4.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(6) { opacity: 0.39; left: 35.8vw; border-left-width: 5.3vmin; animation: fall-6 0.6s -2s ease-in infinite; } @keyframes fall-6 { 8.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(7) { opacity: 0.15; left: 2.9vw; border-left-width: 2vmin; animation: fall-7 1.35s -10s ease-in infinite; } @keyframes fall-7 { 6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(8) { opacity: 0.16; left: 54.1vw; border-left-width: 6vmin; animation: fall-8 0.6s -8s ease-in infinite; } @keyframes fall-8 { 4.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(9) { opacity: 0.89; left: 16.7vw; border-left-width: 7.7vmin; animation: fall-9 0.75s -12.5s ease-in infinite; } @keyframes fall-9 { 7.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(10) { opacity: 0.1; left: 48vw; border-left-width: 5.1vmin; animation: fall-10 0.75s -4.5s ease-in infinite; } @keyframes fall-10 { 9.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(11) { opacity: 0.1; left: 31.1vw; border-left-width: 8vmin; animation: fall-11 1.5s -2s ease-in infinite; } @keyframes fall-11 { 7.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(12) { opacity: 0.52; left: 94.7vw; border-left-width: 5.2vmin; animation: fall-12 1.5s -0.5s ease-in infinite; } @keyframes fall-12 { 8.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(13) { opacity: 0.86; left: 55vw; border-left-width: 3.5vmin; animation: fall-13 1.8s -1s ease-in infinite; } @keyframes fall-13 { 1% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(14) { opacity: 0.76; left: 62.8vw; border-left-width: 4.8vmin; animation: fall-14 1.8s -2.5s ease-in infinite; } @keyframes fall-14 { 8.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(15) { opacity: 0.62; left: 56.5vw; border-left-width: 0.1vmin; animation: fall-15 0.15s -5s ease-in infinite; } @keyframes fall-15 { 3.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(16) { opacity: 0.25; left: 61.7vw; border-left-width: 6.1vmin; animation: fall-16 2.25s -7s ease-in infinite; } @keyframes fall-16 { 2.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(17) { opacity: 0.79; left: 27.4vw; border-left-width: 4vmin; animation: fall-17 1.5s -11.5s ease-in infinite; } @keyframes fall-17 { 7.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(18) { opacity: 0.11; left: 47.5vw; border-left-width: 4.6vmin; animation: fall-18 1.8s -5.5s ease-in infinite; } @keyframes fall-18 { 5.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(19) { opacity: 0.86; left: 110.5vw; border-left-width: 2.7vmin; animation: fall-19 1.35s -7.5s ease-in infinite; } @keyframes fall-19 { 3.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(20) { opacity: 0.28; left: 54.6vw; border-left-width: 5vmin; animation: fall-20 0.6s -10s ease-in infinite; } @keyframes fall-20 { 7.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(21) { opacity: 0.74; left: 26.7vw; border-left-width: 1.3vmin; animation: fall-21 1.5s -7.5s ease-in infinite; } @keyframes fall-21 { 6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(22) { opacity: 0.47; left: 87.6vw; border-left-width: 2.2vmin; animation: fall-22 0.6s -3s ease-in infinite; } @keyframes fall-22 { 1.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(23) { opacity: 0.87; left: 0.5vw; border-left-width: 3.9vmin; animation: fall-23 1.65s -2.5s ease-in infinite; } @keyframes fall-23 { 6.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(24) { opacity: 0.22; left: 37.6vw; border-left-width: 1.2vmin; animation: fall-24 1.95s -5.5s ease-in infinite; } @keyframes fall-24 { 4.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(25) { opacity: 0.68; left: 21.9vw; border-left-width: 0.4vmin; animation: fall-25 0.3s -11.5s ease-in infinite; } @keyframes fall-25 { 6.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(26) { opacity: 0.43; left: 6.5vw; border-left-width: 2.4vmin; animation: fall-26 0.75s -5.5s ease-in infinite; } @keyframes fall-26 { 8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(27) { opacity: 0.06; left: 51.9vw; border-left-width: 4vmin; animation: fall-27 1.65s -10.5s ease-in infinite; } @keyframes fall-27 { 6.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(28) { opacity: 0.6; left: 96.1vw; border-left-width: 0.2vmin; animation: fall-28 2.1s -11s ease-in infinite; } @keyframes fall-28 { 1.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(29) { opacity: 0.44; left: 51.5vw; border-left-width: 2.9vmin; animation: fall-29 1.35s -4s ease-in infinite; } @keyframes fall-29 { 9% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(30) { opacity: 0.11; left: 97vw; border-left-width: 5.3vmin; animation: fall-30 0.3s -4s ease-in infinite; } @keyframes fall-30 { 0.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(31) { opacity: 0.34; left: 80.8vw; border-left-width: 4vmin; animation: fall-31 1.2s -8s ease-in infinite; } @keyframes fall-31 { 3% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(32) { opacity: 0.13; left: 80vw; border-left-width: 5.5vmin; animation: fall-32 0.9s -9.5s ease-in infinite; } @keyframes fall-32 { 8.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(33) { opacity: 0.74; left: 99.7vw; border-left-width: 5.4vmin; animation: fall-33 1.35s -6.5s ease-in infinite; } @keyframes fall-33 { 7% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(34) { opacity: 0.77; left: 98.8vw; border-left-width: 5.6vmin; animation: fall-34 1.2s -6s ease-in infinite; } @keyframes fall-34 { 3.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(35) { opacity: 0.8; left: 114.3vw; border-left-width: 1.3vmin; animation: fall-35 0.75s -9.5s ease-in infinite; } @keyframes fall-35 { 4.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(36) { opacity: 0.82; left: 82.8vw; border-left-width: 5.4vmin; animation: fall-36 0.9s -9.5s ease-in infinite; } @keyframes fall-36 { 6.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(37) { opacity: 0.16; left: 75.7vw; border-left-width: 6.9vmin; animation: fall-37 2.25s -2s ease-in infinite; } @keyframes fall-37 { 4.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(38) { opacity: 0.37; left: 42.2vw; border-left-width: 2.8vmin; animation: fall-38 1.05s -6.5s ease-in infinite; } @keyframes fall-38 { 2.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(39) { opacity: 0.85; left: 105.2vw; border-left-width: 6vmin; animation: fall-39 0.6s -3s ease-in infinite; } @keyframes fall-39 { 3.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(40) { opacity: 0.77; left: 90vw; border-left-width: 4.9vmin; animation: fall-40 0.6s -0.5s ease-in infinite; } @keyframes fall-40 { 7.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(41) { opacity: 0.14; left: 56.1vw; border-left-width: 1.3vmin; animation: fall-41 1.35s -2s ease-in infinite; } @keyframes fall-41 { 7.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(42) { opacity: 0.22; left: 88.9vw; border-left-width: 1.8vmin; animation: fall-42 1.35s -4.5s ease-in infinite; } @keyframes fall-42 { 1.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(43) { opacity: 0.73; left: 37.1vw; border-left-width: 7.7vmin; animation: fall-43 1.5s -8s ease-in infinite; } @keyframes fall-43 { 10% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(44) { opacity: 0.16; left: 12.1vw; border-left-width: 5.6vmin; animation: fall-44 0.9s -2s ease-in infinite; } @keyframes fall-44 { 5.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(45) { opacity: 0.84; left: 36.1vw; border-left-width: 5.9vmin; animation: fall-45 0.45s -2.5s ease-in infinite; } @keyframes fall-45 { 1.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(46) { opacity: 0.27; left: 110.3vw; border-left-width: 6.7vmin; animation: fall-46 0.45s -6.5s ease-in infinite; } @keyframes fall-46 { 4.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(47) { opacity: 0.67; left: 63vw; border-left-width: 3.2vmin; animation: fall-47 0.6s -6s ease-in infinite; } @keyframes fall-47 { 2.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(48) { opacity: 0.21; left: 72.2vw; border-left-width: 2.2vmin; animation: fall-48 1.65s -9.5s ease-in infinite; } @keyframes fall-48 { 9.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(49) { opacity: 0.51; left: 18.8vw; border-left-width: 7.2vmin; animation: fall-49 1.05s -3s ease-in infinite; } @keyframes fall-49 { 4.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(50) { opacity: 0.65; left: 113.5vw; border-left-width: 0.9vmin; animation: fall-50 2.1s -11s ease-in infinite; } @keyframes fall-50 { 1.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(51) { opacity: 0.68; left: 97.3vw; border-left-width: 7.2vmin; animation: fall-51 2.1s -2.5s ease-in infinite; } @keyframes fall-51 { 7.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(52) { opacity: 0.8; left: 75.2vw; border-left-width: 3.9vmin; animation: fall-52 0.75s -11s ease-in infinite; } @keyframes fall-52 { 6.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(53) { opacity: 0.5; left: 114vw; border-left-width: 2.2vmin; animation: fall-53 1.8s -4.5s ease-in infinite; } @keyframes fall-53 { 8.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(54) { opacity: 0.02; left: 56.8vw; border-left-width: 0.3vmin; animation: fall-54 1.5s -4.5s ease-in infinite; } @keyframes fall-54 { 9.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(55) { opacity: 0.6; left: 6.8vw; border-left-width: 0.5vmin; animation: fall-55 2.1s -7s ease-in infinite; } @keyframes fall-55 { 4.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(56) { opacity: 0.63; left: 117.5vw; border-left-width: 7.9vmin; animation: fall-56 1.35s -1s ease-in infinite; } @keyframes fall-56 { 0.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(57) { opacity: 0.1; left: 62.5vw; border-left-width: 6.4vmin; animation: fall-57 0.75s -12s ease-in infinite; } @keyframes fall-57 { 1% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(58) { opacity: 0.53; left: 71.7vw; border-left-width: 3.9vmin; animation: fall-58 0.75s -6.5s ease-in infinite; } @keyframes fall-58 { 1.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(59) { opacity: 0.85; left: 69.7vw; border-left-width: 2.1vmin; animation: fall-59 0.3s -12s ease-in infinite; } @keyframes fall-59 { 2.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(60) { opacity: 0.03; left: 32.3vw; border-left-width: 4.8vmin; animation: fall-60 1.35s -2.5s ease-in infinite; } @keyframes fall-60 { 1.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(61) { opacity: 0.25; left: 81.4vw; border-left-width: 2.1vmin; animation: fall-61 1.05s -3s ease-in infinite; } @keyframes fall-61 { 5.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(62) { opacity: 0.23; left: 64.6vw; border-left-width: 6.1vmin; animation: fall-62 0.3s -7s ease-in infinite; } @keyframes fall-62 { 1.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(63) { opacity: 0.53; left: 89.1vw; border-left-width: 7.2vmin; animation: fall-63 0.6s -0.5s ease-in infinite; } @keyframes fall-63 { 3.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(64) { opacity: 0.71; left: 77.2vw; border-left-width: 4.9vmin; animation: fall-64 1.35s -0.5s ease-in infinite; } @keyframes fall-64 { 5.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(65) { opacity: 0.48; left: 79.7vw; border-left-width: 0.6vmin; animation: fall-65 0.75s -12.5s ease-in infinite; } @keyframes fall-65 { 5.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(66) { opacity: 0.08; left: 95.4vw; border-left-width: 2.7vmin; animation: fall-66 1.35s -5.5s ease-in infinite; } @keyframes fall-66 { 1.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(67) { opacity: 0.9; left: 85.2vw; border-left-width: 7.1vmin; animation: fall-67 0.75s -2s ease-in infinite; } @keyframes fall-67 { 4.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(68) { opacity: 0.68; left: 48.9vw; border-left-width: 0.8vmin; animation: fall-68 0.6s -7.5s ease-in infinite; } @keyframes fall-68 { 8.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(69) { opacity: 0.33; left: 28.3vw; border-left-width: 4.9vmin; animation: fall-69 1.95s -1.5s ease-in infinite; } @keyframes fall-69 { 4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(70) { opacity: 0.12; left: 48.9vw; border-left-width: 3.2vmin; animation: fall-70 1.35s -7s ease-in infinite; } @keyframes fall-70 { 9.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(71) { opacity: 0.46; left: 40.7vw; border-left-width: 7.8vmin; animation: fall-71 0.3s -5.5s ease-in infinite; } @keyframes fall-71 { 9.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(72) { opacity: 0.33; left: 34.9vw; border-left-width: 0.1vmin; animation: fall-72 1.35s -12.5s ease-in infinite; } @keyframes fall-72 { 3.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(73) { opacity: 0.43; left: 25.4vw; border-left-width: 3vmin; animation: fall-73 0.75s -5.5s ease-in infinite; } @keyframes fall-73 { 0.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(74) { opacity: 0.13; left: 78.8vw; border-left-width: 6.2vmin; animation: fall-74 1.05s -1.5s ease-in infinite; } @keyframes fall-74 { 1.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(75) { opacity: 0.16; left: 49.3vw; border-left-width: 4.1vmin; animation: fall-75 0.6s -7.5s ease-in infinite; } @keyframes fall-75 { 9.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(76) { opacity: 0.73; left: 28.3vw; border-left-width: 2.1vmin; animation: fall-76 1.65s -1s ease-in infinite; } @keyframes fall-76 { 8.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(77) { opacity: 0.78; left: 3.7vw; border-left-width: 3.9vmin; animation: fall-77 0.15s -9.5s ease-in infinite; } @keyframes fall-77 { 1.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(78) { opacity: 0.29; left: 73.7vw; border-left-width: 7.4vmin; animation: fall-78 2.1s -12s ease-in infinite; } @keyframes fall-78 { 8.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(79) { opacity: 0.06; left: 63.5vw; border-left-width: 4.8vmin; animation: fall-79 1.2s -9.5s ease-in infinite; } @keyframes fall-79 { 1.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(80) { opacity: 0.57; left: 8.5vw; border-left-width: 4.4vmin; animation: fall-80 0.15s -2.5s ease-in infinite; } @keyframes fall-80 { 1.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(81) { opacity: 0.32; left: 21.2vw; border-left-width: 1.1vmin; animation: fall-81 1.05s -11s ease-in infinite; } @keyframes fall-81 { 7.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(82) { opacity: 0.28; left: 8vw; border-left-width: 2.9vmin; animation: fall-82 1.5s -11s ease-in infinite; } @keyframes fall-82 { 1.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(83) { opacity: 0.46; left: 74.6vw; border-left-width: 0.1vmin; animation: fall-83 1.95s -3.5s ease-in infinite; } @keyframes fall-83 { 8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(84) { opacity: 0.61; left: 43vw; border-left-width: 4.3vmin; animation: fall-84 0.6s -8.5s ease-in infinite; } @keyframes fall-84 { 7% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(85) { opacity: 0.7; left: 118.4vw; border-left-width: 3.3vmin; animation: fall-85 1.95s -2.5s ease-in infinite; } @keyframes fall-85 { 6.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(86) { opacity: 0.41; left: 43.2vw; border-left-width: 6.3vmin; animation: fall-86 1.2s -7.5s ease-in infinite; } @keyframes fall-86 { 5% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(87) { opacity: 0.15; left: 87.2vw; border-left-width: 1.9vmin; animation: fall-87 1.65s -12.5s ease-in infinite; } @keyframes fall-87 { 6.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(88) { opacity: 0.12; left: 12.3vw; border-left-width: 6.5vmin; animation: fall-88 0.45s -6.5s ease-in infinite; } @keyframes fall-88 { 8.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(89) { opacity: 0.46; left: 86.5vw; border-left-width: 2.3vmin; animation: fall-89 1.95s -5s ease-in infinite; } @keyframes fall-89 { 3.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(90) { opacity: 0.71; left: 79.7vw; border-left-width: 7.8vmin; animation: fall-90 0.45s -2.5s ease-in infinite; } @keyframes fall-90 { 7% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(91) { opacity: 0.65; left: 40vw; border-left-width: 1.2vmin; animation: fall-91 1.8s -3.5s ease-in infinite; } @keyframes fall-91 { 8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(92) { opacity: 0.56; left: 84.6vw; border-left-width: 4.6vmin; animation: fall-92 1.2s -7.5s ease-in infinite; } @keyframes fall-92 { 3.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(93) { opacity: 0.44; left: 115vw; border-left-width: 4.3vmin; animation: fall-93 2.25s -0.5s ease-in infinite; } @keyframes fall-93 { 2.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(94) { opacity: 0.67; left: 34.9vw; border-left-width: 4.3vmin; animation: fall-94 0.75s -3s ease-in infinite; } @keyframes fall-94 { 2.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(95) { opacity: 0.65; left: 1.2vw; border-left-width: 0.3vmin; animation: fall-95 1.5s -2s ease-in infinite; } @keyframes fall-95 { 1.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(96) { opacity: 0.5; left: 116.9vw; border-left-width: 5.7vmin; animation: fall-96 1.8s -10.5s ease-in infinite; } @keyframes fall-96 { 3.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(97) { opacity: 0.4; left: 65.7vw; border-left-width: 5.3vmin; animation: fall-97 1.95s -5.5s ease-in infinite; } @keyframes fall-97 { 4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(98) { opacity: 0.32; left: 34.4vw; border-left-width: 1.2vmin; animation: fall-98 0.75s -8.5s ease-in infinite; } @keyframes fall-98 { 6.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(99) { opacity: 0.02; left: 62.9vw; border-left-width: 4.1vmin; animation: fall-99 2.25s -9s ease-in infinite; } @keyframes fall-99 { 6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(100) { opacity: 0.81; left: 107.2vw; border-left-width: 5.7vmin; animation: fall-100 2.1s -5s ease-in infinite; } @keyframes fall-100 { 2.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(101) { opacity: 0.89; left: 87.4vw; border-left-width: 7.4vmin; animation: fall-101 0.9s -9s ease-in infinite; } @keyframes fall-101 { 5% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(102) { opacity: 0.88; left: 108.1vw; border-left-width: 2.2vmin; animation: fall-102 1.35s -6.5s ease-in infinite; } @keyframes fall-102 { 7.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(103) { opacity: 0.3; left: 3.8vw; border-left-width: 1.1vmin; animation: fall-103 1.65s -8s ease-in infinite; } @keyframes fall-103 { 6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(104) { opacity: 0.7; left: 24.4vw; border-left-width: 0.5vmin; animation: fall-104 0.3s -2s ease-in infinite; } @keyframes fall-104 { 0.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(105) { opacity: 0.51; left: 57.8vw; border-left-width: 3.5vmin; animation: fall-105 1.65s -10s ease-in infinite; } @keyframes fall-105 { 0.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(106) { opacity: 0.48; left: 20.9vw; border-left-width: 0.7vmin; animation: fall-106 0.75s -7s ease-in infinite; } @keyframes fall-106 { 4.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(107) { opacity: 0.87; left: 32.4vw; border-left-width: 2.1vmin; animation: fall-107 0.75s -11.5s ease-in infinite; } @keyframes fall-107 { 0.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(108) { opacity: 0.62; left: 33.3vw; border-left-width: 8vmin; animation: fall-108 0.15s -5s ease-in infinite; } @keyframes fall-108 { 0.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(109) { opacity: 0.11; left: 102.1vw; border-left-width: 3.4vmin; animation: fall-109 1.95s -6s ease-in infinite; } @keyframes fall-109 { 3.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(110) { opacity: 0.18; left: 94.5vw; border-left-width: 0.6vmin; animation: fall-110 0.6s -1s ease-in infinite; } @keyframes fall-110 { 5% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(111) { opacity: 0.59; left: 29.9vw; border-left-width: 1.4vmin; animation: fall-111 0.9s -8s ease-in infinite; } @keyframes fall-111 { 6.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(112) { opacity: 0.56; left: 42.1vw; border-left-width: 2.7vmin; animation: fall-112 1.35s -4.5s ease-in infinite; } @keyframes fall-112 { 2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(113) { opacity: 0.56; left: 81.5vw; border-left-width: 1vmin; animation: fall-113 0.6s -10.5s ease-in infinite; } @keyframes fall-113 { 2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(114) { opacity: 0.01; left: 3.2vw; border-left-width: 0.2vmin; animation: fall-114 0.15s -7s ease-in infinite; } @keyframes fall-114 { 1.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(115) { opacity: 0.04; left: 41.4vw; border-left-width: 7vmin; animation: fall-115 1.8s -12s ease-in infinite; } @keyframes fall-115 { 2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(116) { opacity: 0.69; left: 62.4vw; border-left-width: 6.1vmin; animation: fall-116 1.35s -11s ease-in infinite; } @keyframes fall-116 { 8.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(117) { opacity: 0.01; left: 93vw; border-left-width: 1.7vmin; animation: fall-117 2.1s -7s ease-in infinite; } @keyframes fall-117 { 6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(118) { opacity: 0.02; left: 81.4vw; border-left-width: 4.8vmin; animation: fall-118 0.75s -6s ease-in infinite; } @keyframes fall-118 { 6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(119) { opacity: 0.16; left: 56.6vw; border-left-width: 1vmin; animation: fall-119 0.3s -5.5s ease-in infinite; } @keyframes fall-119 { 7.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(120) { opacity: 0.04; left: 103.6vw; border-left-width: 5.7vmin; animation: fall-120 1.05s -10.5s ease-in infinite; } @keyframes fall-120 { 1.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(121) { opacity: 0.54; left: 36.7vw; border-left-width: 0.7vmin; animation: fall-121 2.1s -1.5s ease-in infinite; } @keyframes fall-121 { 4.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(122) { opacity: 0.55; left: 11.8vw; border-left-width: 0.9vmin; animation: fall-122 0.9s -8.5s ease-in infinite; } @keyframes fall-122 { 6.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(123) { opacity: 0.47; left: 94.6vw; border-left-width: 6.7vmin; animation: fall-123 0.45s -10s ease-in infinite; } @keyframes fall-123 { 5.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(124) { opacity: 0.64; left: 64.9vw; border-left-width: 5.2vmin; animation: fall-124 2.25s -10s ease-in infinite; } @keyframes fall-124 { 8.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(125) { opacity: 0.59; left: 89.2vw; border-left-width: 1.2vmin; animation: fall-125 0.6s -7s ease-in infinite; } @keyframes fall-125 { 8.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(126) { opacity: 0.68; left: 115.7vw; border-left-width: 4.7vmin; animation: fall-126 1.95s -4s ease-in infinite; } @keyframes fall-126 { 7% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(127) { opacity: 0.07; left: 68.7vw; border-left-width: 5.2vmin; animation: fall-127 1.8s -12.5s ease-in infinite; } @keyframes fall-127 { 2.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(128) { opacity: 0.41; left: 38.8vw; border-left-width: 6.1vmin; animation: fall-128 1.05s -6s ease-in infinite; } @keyframes fall-128 { 5% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(129) { opacity: 0.22; left: 15.3vw; border-left-width: 2.6vmin; animation: fall-129 0.3s -1s ease-in infinite; } @keyframes fall-129 { 6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(130) { opacity: 0.7; left: 0.2vw; border-left-width: 6.2vmin; animation: fall-130 1.2s -3.5s ease-in infinite; } @keyframes fall-130 { 2.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(131) { opacity: 0.29; left: 7.3vw; border-left-width: 0.2vmin; animation: fall-131 1.65s -4.5s ease-in infinite; } @keyframes fall-131 { 5.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(132) { opacity: 0.45; left: 32.1vw; border-left-width: 4.3vmin; animation: fall-132 1.2s -2.5s ease-in infinite; } @keyframes fall-132 { 8.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(133) { opacity: 0.55; left: 86.9vw; border-left-width: 7.4vmin; animation: fall-133 0.15s -6.5s ease-in infinite; } @keyframes fall-133 { 0.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(134) { opacity: 0.8; left: 7.6vw; border-left-width: 5.8vmin; animation: fall-134 1.65s -1.5s ease-in infinite; } @keyframes fall-134 { 6.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(135) { opacity: 0.32; left: 119.6vw; border-left-width: 6.1vmin; animation: fall-135 0.9s -7s ease-in infinite; } @keyframes fall-135 { 6.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(136) { opacity: 0.66; left: 103.8vw; border-left-width: 6vmin; animation: fall-136 0.6s -9.5s ease-in infinite; } @keyframes fall-136 { 9.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(137) { opacity: 0.58; left: 80.8vw; border-left-width: 6.5vmin; animation: fall-137 0.15s -3s ease-in infinite; } @keyframes fall-137 { 0.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(138) { opacity: 0.28; left: 47.9vw; border-left-width: 5.3vmin; animation: fall-138 0.9s -8s ease-in infinite; } @keyframes fall-138 { 8.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(139) { opacity: 0.08; left: 62.1vw; border-left-width: 2.9vmin; animation: fall-139 1.65s -9s ease-in infinite; } @keyframes fall-139 { 5.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(140) { opacity: 0.7; left: 54.3vw; border-left-width: 5.4vmin; animation: fall-140 1.35s -3s ease-in infinite; } @keyframes fall-140 { 8.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(141) { opacity: 0.33; left: 69.7vw; border-left-width: 2.9vmin; animation: fall-141 1.35s -12s ease-in infinite; } @keyframes fall-141 { 10% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(142) { opacity: 0.84; left: 108.9vw; border-left-width: 4.7vmin; animation: fall-142 1.65s -12s ease-in infinite; } @keyframes fall-142 { 2.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(143) { opacity: 0.5; left: 104vw; border-left-width: 2.7vmin; animation: fall-143 2.25s -7.5s ease-in infinite; } @keyframes fall-143 { 5.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(144) { opacity: 0.9; left: 67.8vw; border-left-width: 3vmin; animation: fall-144 0.15s -2s ease-in infinite; } @keyframes fall-144 { 1.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(145) { opacity: 0.44; left: 67.1vw; border-left-width: 3.3vmin; animation: fall-145 0.3s -7s ease-in infinite; } @keyframes fall-145 { 5.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(146) { opacity: 0.12; left: 110.3vw; border-left-width: 3.3vmin; animation: fall-146 1.5s -4.5s ease-in infinite; } @keyframes fall-146 { 8.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(147) { opacity: 0.25; left: 42.6vw; border-left-width: 7.9vmin; animation: fall-147 0.9s -12.5s ease-in infinite; } @keyframes fall-147 { 7.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(148) { opacity: 0.58; left: 15.3vw; border-left-width: 1.3vmin; animation: fall-148 1.65s -8s ease-in infinite; } @keyframes fall-148 { 2.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(149) { opacity: 0.89; left: 69vw; border-left-width: 7.4vmin; animation: fall-149 2.25s -3s ease-in infinite; } @keyframes fall-149 { 8.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(150) { opacity: 0.76; left: 84.3vw; border-left-width: 4.7vmin; animation: fall-150 0.6s -4.5s ease-in infinite; } @keyframes fall-150 { 7.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(151) { opacity: 0.04; left: 111.1vw; border-left-width: 7.2vmin; animation: fall-151 1.8s -3s ease-in infinite; } @keyframes fall-151 { 8.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(152) { opacity: 0.71; left: 52vw; border-left-width: 7.2vmin; animation: fall-152 1.65s -11s ease-in infinite; } @keyframes fall-152 { 0.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(153) { opacity: 0.73; left: 114.2vw; border-left-width: 0.8vmin; animation: fall-153 0.45s -7.5s ease-in infinite; } @keyframes fall-153 { 10% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(154) { opacity: 0.42; left: 83.7vw; border-left-width: 0.9vmin; animation: fall-154 2.25s -8.5s ease-in infinite; } @keyframes fall-154 { 6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(155) { opacity: 0.5; left: 19.8vw; border-left-width: 7.2vmin; animation: fall-155 0.15s -0.5s ease-in infinite; } @keyframes fall-155 { 9.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(156) { opacity: 0.14; left: 92.3vw; border-left-width: 7.4vmin; animation: fall-156 1.5s -4.5s ease-in infinite; } @keyframes fall-156 { 4.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(157) { opacity: 0.47; left: 41.8vw; border-left-width: 1.8vmin; animation: fall-157 1.2s -1.5s ease-in infinite; } @keyframes fall-157 { 2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(158) { opacity: 0.88; left: 40.1vw; border-left-width: 1.8vmin; animation: fall-158 1.35s -10s ease-in infinite; } @keyframes fall-158 { 8.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(159) { opacity: 0.77; left: 7.8vw; border-left-width: 7.8vmin; animation: fall-159 0.45s -7s ease-in infinite; } @keyframes fall-159 { 1.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(160) { opacity: 0.23; left: 28.2vw; border-left-width: 7vmin; animation: fall-160 0.45s -8.5s ease-in infinite; } @keyframes fall-160 { 4.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(161) { opacity: 0.18; left: 45.1vw; border-left-width: 5.7vmin; animation: fall-161 0.6s -2.5s ease-in infinite; } @keyframes fall-161 { 6.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(162) { opacity: 0.74; left: 0.3vw; border-left-width: 1.7vmin; animation: fall-162 2.1s -5s ease-in infinite; } @keyframes fall-162 { 0.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(163) { opacity: 0.47; left: 88.4vw; border-left-width: 1.1vmin; animation: fall-163 0.6s -12.5s ease-in infinite; } @keyframes fall-163 { 1.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(164) { opacity: 0.49; left: 9.8vw; border-left-width: 4.7vmin; animation: fall-164 0.6s -4.5s ease-in infinite; } @keyframes fall-164 { 9.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(165) { opacity: 0.44; left: 105.8vw; border-left-width: 0.3vmin; animation: fall-165 1.05s -2.5s ease-in infinite; } @keyframes fall-165 { 7.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(166) { opacity: 0.57; left: 45.2vw; border-left-width: 5.7vmin; animation: fall-166 2.1s -12.5s ease-in infinite; } @keyframes fall-166 { 8.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(167) { opacity: 0.35; left: 54.8vw; border-left-width: 0.8vmin; animation: fall-167 0.75s -2.5s ease-in infinite; } @keyframes fall-167 { 3.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(168) { opacity: 0.39; left: 61.9vw; border-left-width: 4.1vmin; animation: fall-168 2.25s -9s ease-in infinite; } @keyframes fall-168 { 0.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(169) { opacity: 0.2; left: 32.3vw; border-left-width: 2.1vmin; animation: fall-169 1.05s -6.5s ease-in infinite; } @keyframes fall-169 { 5.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(170) { opacity: 0.44; left: 71.4vw; border-left-width: 3.7vmin; animation: fall-170 2.25s -4s ease-in infinite; } @keyframes fall-170 { 6.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(171) { opacity: 0.68; left: 47.5vw; border-left-width: 7.7vmin; animation: fall-171 1.2s -5s ease-in infinite; } @keyframes fall-171 { 0.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(172) { opacity: 0.51; left: 55vw; border-left-width: 0.3vmin; animation: fall-172 0.3s -8s ease-in infinite; } @keyframes fall-172 { 5.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(173) { opacity: 0.36; left: 101.7vw; border-left-width: 1.2vmin; animation: fall-173 1.65s -11.5s ease-in infinite; } @keyframes fall-173 { 0.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(174) { opacity: 0.56; left: 71.1vw; border-left-width: 0.3vmin; animation: fall-174 2.25s -12.5s ease-in infinite; } @keyframes fall-174 { 7% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(175) { opacity: 0.68; left: 1.7vw; border-left-width: 6.9vmin; animation: fall-175 1.8s -2.5s ease-in infinite; } @keyframes fall-175 { 8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(176) { opacity: 0.53; left: 11.5vw; border-left-width: 7.6vmin; animation: fall-176 2.1s -1.5s ease-in infinite; } @keyframes fall-176 { 4.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(177) { opacity: 0.24; left: 103.8vw; border-left-width: 4.1vmin; animation: fall-177 1.95s -9s ease-in infinite; } @keyframes fall-177 { 0.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(178) { opacity: 0.45; left: 102.7vw; border-left-width: 3.3vmin; animation: fall-178 1.05s -11s ease-in infinite; } @keyframes fall-178 { 4.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(179) { opacity: 0.73; left: 24.8vw; border-left-width: 4.5vmin; animation: fall-179 1.65s -1.5s ease-in infinite; } @keyframes fall-179 { 5.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(180) { opacity: 0.3; left: 113.4vw; border-left-width: 1.6vmin; animation: fall-180 0.6s -12.5s ease-in infinite; } @keyframes fall-180 { 2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(181) { opacity: 0.26; left: 2.9vw; border-left-width: 5.7vmin; animation: fall-181 1.05s -10s ease-in infinite; } @keyframes fall-181 { 3% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(182) { opacity: 0.19; left: 31.5vw; border-left-width: 1.1vmin; animation: fall-182 1.95s -7.5s ease-in infinite; } @keyframes fall-182 { 4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(183) { opacity: 0.21; left: 22.4vw; border-left-width: 6.2vmin; animation: fall-183 1.5s -3s ease-in infinite; } @keyframes fall-183 { 9.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(184) { opacity: 0.49; left: 38.4vw; border-left-width: 1.4vmin; animation: fall-184 0.15s -8s ease-in infinite; } @keyframes fall-184 { 4.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(185) { opacity: 0.19; left: 56.6vw; border-left-width: 2.3vmin; animation: fall-185 2.1s -12.5s ease-in infinite; } @keyframes fall-185 { 6.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(186) { opacity: 0.82; left: 36.8vw; border-left-width: 3.2vmin; animation: fall-186 0.3s -9s ease-in infinite; } @keyframes fall-186 { 8.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(187) { opacity: 0.7; left: 26.8vw; border-left-width: 2.5vmin; animation: fall-187 0.45s -2.5s ease-in infinite; } @keyframes fall-187 { 9.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(188) { opacity: 0.81; left: 70.3vw; border-left-width: 0.4vmin; animation: fall-188 1.05s -2.5s ease-in infinite; } @keyframes fall-188 { 1% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(189) { opacity: 0.04; left: 63.1vw; border-left-width: 5.3vmin; animation: fall-189 0.9s -2s ease-in infinite; } @keyframes fall-189 { 9.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(190) { opacity: 0.31; left: 51.3vw; border-left-width: 1.5vmin; animation: fall-190 1.35s -10.5s ease-in infinite; } @keyframes fall-190 { 9% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(191) { opacity: 0.69; left: 5.8vw; border-left-width: 1.9vmin; animation: fall-191 0.15s -11s ease-in infinite; } @keyframes fall-191 { 8.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(192) { opacity: 0.6; left: 91.6vw; border-left-width: 2.2vmin; animation: fall-192 1.8s -9s ease-in infinite; } @keyframes fall-192 { 1.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(193) { opacity: 0.38; left: 59.9vw; border-left-width: 2.8vmin; animation: fall-193 1.95s -5.5s ease-in infinite; } @keyframes fall-193 { 5% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(194) { opacity: 0.25; left: 5vw; border-left-width: 5.4vmin; animation: fall-194 0.9s -9s ease-in infinite; } @keyframes fall-194 { 7.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(195) { opacity: 0.56; left: 112.7vw; border-left-width: 1.5vmin; animation: fall-195 1.8s -1s ease-in infinite; } @keyframes fall-195 { 3.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(196) { opacity: 0.32; left: 73.1vw; border-left-width: 4.9vmin; animation: fall-196 1.8s -5.5s ease-in infinite; } @keyframes fall-196 { 7.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(197) { opacity: 0.2; left: 0.9vw; border-left-width: 6.1vmin; animation: fall-197 1.65s -11.5s ease-in infinite; } @keyframes fall-197 { 7.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(198) { opacity: 0.19; left: 46.9vw; border-left-width: 4.3vmin; animation: fall-198 0.6s -6.5s ease-in infinite; } @keyframes fall-198 { 6.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(199) { opacity: 0.88; left: 57.1vw; border-left-width: 0.2vmin; animation: fall-199 0.3s -5s ease-in infinite; } @keyframes fall-199 { 6.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(200) { opacity: 0.78; left: 43.6vw; border-left-width: 2.3vmin; animation: fall-200 1.65s -6s ease-in infinite; } @keyframes fall-200 { 4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(201) { opacity: 0.37; left: 34vw; border-left-width: 7.6vmin; animation: fall-201 1.35s -7s ease-in infinite; } @keyframes fall-201 { 6.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(202) { opacity: 0.28; left: 105.5vw; border-left-width: 3.8vmin; animation: fall-202 0.45s -1s ease-in infinite; } @keyframes fall-202 { 10% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(203) { opacity: 0.5; left: 52.4vw; border-left-width: 2.7vmin; animation: fall-203 1.65s -6.5s ease-in infinite; } @keyframes fall-203 { 3.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(204) { opacity: 0.41; left: 47.7vw; border-left-width: 2.5vmin; animation: fall-204 0.9s -3.5s ease-in infinite; } @keyframes fall-204 { 7.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(205) { opacity: 0.6; left: 49.9vw; border-left-width: 2.6vmin; animation: fall-205 0.3s -7s ease-in infinite; } @keyframes fall-205 { 8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(206) { opacity: 0.19; left: 44.2vw; border-left-width: 0.9vmin; animation: fall-206 0.6s -2s ease-in infinite; } @keyframes fall-206 { 9.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(207) { opacity: 0.68; left: 51.3vw; border-left-width: 5.6vmin; animation: fall-207 0.75s -11s ease-in infinite; } @keyframes fall-207 { 4.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(208) { opacity: 0.76; left: 74.9vw; border-left-width: 3.8vmin; animation: fall-208 1.5s -2s ease-in infinite; } @keyframes fall-208 { 9.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(209) { opacity: 0.31; left: 38.3vw; border-left-width: 5.8vmin; animation: fall-209 1.35s -1.5s ease-in infinite; } @keyframes fall-209 { 8.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(210) { opacity: 0.31; left: 59.8vw; border-left-width: 5.5vmin; animation: fall-210 2.25s -8s ease-in infinite; } @keyframes fall-210 { 9.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(211) { opacity: 0.43; left: 75.1vw; border-left-width: 1.9vmin; animation: fall-211 1.05s -3.5s ease-in infinite; } @keyframes fall-211 { 3.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(212) { opacity: 0.52; left: 80.8vw; border-left-width: 5.5vmin; animation: fall-212 1.35s -9s ease-in infinite; } @keyframes fall-212 { 4.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(213) { opacity: 0.62; left: 72vw; border-left-width: 2.8vmin; animation: fall-213 2.25s -2s ease-in infinite; } @keyframes fall-213 { 9.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(214) { opacity: 0.22; left: 46.6vw; border-left-width: 2vmin; animation: fall-214 1.2s -11.5s ease-in infinite; } @keyframes fall-214 { 8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(215) { opacity: 0.62; left: 96.3vw; border-left-width: 0.1vmin; animation: fall-215 0.45s -6.5s ease-in infinite; } @keyframes fall-215 { 2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(216) { opacity: 0.04; left: 61.6vw; border-left-width: 1.6vmin; animation: fall-216 2.25s -0.5s ease-in infinite; } @keyframes fall-216 { 0.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(217) { opacity: 0.07; left: 93.3vw; border-left-width: 0.9vmin; animation: fall-217 0.6s -5.5s ease-in infinite; } @keyframes fall-217 { 6.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(218) { opacity: 0.63; left: 52.4vw; border-left-width: 7.7vmin; animation: fall-218 1.5s -1s ease-in infinite; } @keyframes fall-218 { 4.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(219) { opacity: 0.49; left: 82.6vw; border-left-width: 6.1vmin; animation: fall-219 2.1s -9.5s ease-in infinite; } @keyframes fall-219 { 3.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(220) { opacity: 0.16; left: 113.5vw; border-left-width: 1.3vmin; animation: fall-220 1.8s -11.5s ease-in infinite; } @keyframes fall-220 { 5.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(221) { opacity: 0.21; left: 24.8vw; border-left-width: 0.1vmin; animation: fall-221 0.3s -3.5s ease-in infinite; } @keyframes fall-221 { 6.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(222) { opacity: 0.36; left: 114.8vw; border-left-width: 7.6vmin; animation: fall-222 0.3s -6.5s ease-in infinite; } @keyframes fall-222 { 1% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(223) { opacity: 0.41; left: 25.4vw; border-left-width: 0.8vmin; animation: fall-223 0.9s -11s ease-in infinite; } @keyframes fall-223 { 7% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(224) { opacity: 0.83; left: 36.2vw; border-left-width: 1.9vmin; animation: fall-224 2.25s -7s ease-in infinite; } @keyframes fall-224 { 9.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(225) { opacity: 0.5; left: 109.2vw; border-left-width: 1vmin; animation: fall-225 2.1s -12s ease-in infinite; } @keyframes fall-225 { 3.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(226) { opacity: 0.07; left: 57.2vw; border-left-width: 0.1vmin; animation: fall-226 2.1s -4.5s ease-in infinite; } @keyframes fall-226 { 3.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(227) { opacity: 0.02; left: 72.4vw; border-left-width: 4.6vmin; animation: fall-227 1.95s -2.5s ease-in infinite; } @keyframes fall-227 { 8.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(228) { opacity: 0.49; left: 56.2vw; border-left-width: 7.2vmin; animation: fall-228 1.2s -10s ease-in infinite; } @keyframes fall-228 { 9.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(229) { opacity: 0.02; left: 100.5vw; border-left-width: 7.1vmin; animation: fall-229 1.95s -7.5s ease-in infinite; } @keyframes fall-229 { 7.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(230) { opacity: 0.83; left: 81.9vw; border-left-width: 2.1vmin; animation: fall-230 0.3s -12.5s ease-in infinite; } @keyframes fall-230 { 5.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(231) { opacity: 0.41; left: 24.7vw; border-left-width: 3.4vmin; animation: fall-231 0.6s -9s ease-in infinite; } @keyframes fall-231 { 5.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(232) { opacity: 0.78; left: 46vw; border-left-width: 1.7vmin; animation: fall-232 0.45s -12s ease-in infinite; } @keyframes fall-232 { 7.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(233) { opacity: 0.79; left: 40.9vw; border-left-width: 7.7vmin; animation: fall-233 1.95s -1s ease-in infinite; } @keyframes fall-233 { 0.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(234) { opacity: 0.48; left: 115.3vw; border-left-width: 1.7vmin; animation: fall-234 2.1s -10s ease-in infinite; } @keyframes fall-234 { 4.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(235) { opacity: 0.3; left: 77.7vw; border-left-width: 1.9vmin; animation: fall-235 0.6s -3.5s ease-in infinite; } @keyframes fall-235 { 3.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(236) { opacity: 0.46; left: 37.2vw; border-left-width: 0.9vmin; animation: fall-236 1.5s -4.5s ease-in infinite; } @keyframes fall-236 { 9.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(237) { opacity: 0.15; left: 14.1vw; border-left-width: 3.5vmin; animation: fall-237 0.15s -4s ease-in infinite; } @keyframes fall-237 { 0.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(238) { opacity: 0.76; left: 116.8vw; border-left-width: 1.2vmin; animation: fall-238 2.1s -8s ease-in infinite; } @keyframes fall-238 { 3.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(239) { opacity: 0.25; left: 33.9vw; border-left-width: 0.3vmin; animation: fall-239 0.3s -4.5s ease-in infinite; } @keyframes fall-239 { 7.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(240) { opacity: 0.18; left: 48vw; border-left-width: 5.5vmin; animation: fall-240 1.95s -7s ease-in infinite; } @keyframes fall-240 { 3.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(241) { opacity: 0.59; left: 18.7vw; border-left-width: 3.3vmin; animation: fall-241 0.75s -12s ease-in infinite; } @keyframes fall-241 { 2.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(242) { opacity: 0.03; left: 54.2vw; border-left-width: 7.6vmin; animation: fall-242 1.35s -6.5s ease-in infinite; } @keyframes fall-242 { 0.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(243) { opacity: 0.61; left: 32vw; border-left-width: 7.8vmin; animation: fall-243 0.15s -12s ease-in infinite; } @keyframes fall-243 { 4.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(244) { opacity: 0.68; left: 22.7vw; border-left-width: 3.6vmin; animation: fall-244 0.6s -9s ease-in infinite; } @keyframes fall-244 { 1.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(245) { opacity: 0.53; left: 97.5vw; border-left-width: 1.1vmin; animation: fall-245 1.65s -4s ease-in infinite; } @keyframes fall-245 { 4.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(246) { opacity: 0.39; left: 93.1vw; border-left-width: 6.4vmin; animation: fall-246 1.35s -10.5s ease-in infinite; } @keyframes fall-246 { 8.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(247) { opacity: 0.57; left: 57.1vw; border-left-width: 2.1vmin; animation: fall-247 1.05s -9.5s ease-in infinite; } @keyframes fall-247 { 7.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(248) { opacity: 0.15; left: 22.1vw; border-left-width: 7vmin; animation: fall-248 1.2s -1.5s ease-in infinite; } @keyframes fall-248 { 5.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(249) { opacity: 0.02; left: 19.8vw; border-left-width: 6vmin; animation: fall-249 0.45s -6.5s ease-in infinite; } @keyframes fall-249 { 5.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(250) { opacity: 0.78; left: 117.3vw; border-left-width: 5.4vmin; animation: fall-250 0.15s -12s ease-in infinite; } @keyframes fall-250 { 5.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(251) { opacity: 0.72; left: 79.5vw; border-left-width: 2.9vmin; animation: fall-251 1.8s -6.5s ease-in infinite; } @keyframes fall-251 { 1.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(252) { opacity: 0.26; left: 5.3vw; border-left-width: 3.5vmin; animation: fall-252 0.3s -6.5s ease-in infinite; } @keyframes fall-252 { 2.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(253) { opacity: 0.13; left: 101.5vw; border-left-width: 6.4vmin; animation: fall-253 0.15s -3.5s ease-in infinite; } @keyframes fall-253 { 2.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(254) { opacity: 0.44; left: 62.1vw; border-left-width: 1.5vmin; animation: fall-254 1.65s -5s ease-in infinite; } @keyframes fall-254 { 1.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(255) { opacity: 0.81; left: 102.3vw; border-left-width: 5.6vmin; animation: fall-255 0.3s -6s ease-in infinite; } @keyframes fall-255 { 0.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(256) { opacity: 0.03; left: 99vw; border-left-width: 3.6vmin; animation: fall-256 0.6s -12.5s ease-in infinite; } @keyframes fall-256 { 9.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(257) { opacity: 0.43; left: 25.9vw; border-left-width: 3.9vmin; animation: fall-257 1.35s -2.5s ease-in infinite; } @keyframes fall-257 { 1.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(258) { opacity: 0.7; left: 31vw; border-left-width: 2vmin; animation: fall-258 0.75s -9s ease-in infinite; } @keyframes fall-258 { 0.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(259) { opacity: 0.44; left: 104.5vw; border-left-width: 4.1vmin; animation: fall-259 1.2s -11.5s ease-in infinite; } @keyframes fall-259 { 0.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(260) { opacity: 0.9; left: 42.4vw; border-left-width: 1.9vmin; animation: fall-260 1.2s -4s ease-in infinite; } @keyframes fall-260 { 1.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(261) { opacity: 0.88; left: 8.3vw; border-left-width: 0.3vmin; animation: fall-261 1.8s -5s ease-in infinite; } @keyframes fall-261 { 1.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(262) { opacity: 0.41; left: 95vw; border-left-width: 5.7vmin; animation: fall-262 1.5s -11s ease-in infinite; } @keyframes fall-262 { 2.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(263) { opacity: 0.16; left: 112.5vw; border-left-width: 3.2vmin; animation: fall-263 1.65s -9.5s ease-in infinite; } @keyframes fall-263 { 3.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(264) { opacity: 0.84; left: 77.3vw; border-left-width: 5.1vmin; animation: fall-264 2.1s -2.5s ease-in infinite; } @keyframes fall-264 { 8.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(265) { opacity: 0.85; left: 102.8vw; border-left-width: 3.1vmin; animation: fall-265 0.9s -10.5s ease-in infinite; } @keyframes fall-265 { 5.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(266) { opacity: 0.49; left: 47.7vw; border-left-width: 4.3vmin; animation: fall-266 0.3s -4.5s ease-in infinite; } @keyframes fall-266 { 8.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(267) { opacity: 0.26; left: 48.2vw; border-left-width: 6vmin; animation: fall-267 1.5s -9s ease-in infinite; } @keyframes fall-267 { 8.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(268) { opacity: 0.21; left: 71.3vw; border-left-width: 2.1vmin; animation: fall-268 0.9s -0.5s ease-in infinite; } @keyframes fall-268 { 3.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(269) { opacity: 0.46; left: 93.7vw; border-left-width: 1.6vmin; animation: fall-269 1.65s -4s ease-in infinite; } @keyframes fall-269 { 3.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(270) { opacity: 0.04; left: 40.6vw; border-left-width: 6.4vmin; animation: fall-270 1.2s -1.5s ease-in infinite; } @keyframes fall-270 { 2.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(271) { opacity: 0.69; left: 98.4vw; border-left-width: 2.6vmin; animation: fall-271 1.2s -1.5s ease-in infinite; } @keyframes fall-271 { 5.6% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(272) { opacity: 0.89; left: 70.9vw; border-left-width: 1.5vmin; animation: fall-272 0.75s -2.5s ease-in infinite; } @keyframes fall-272 { 8.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(273) { opacity: 0.18; left: 119.2vw; border-left-width: 7.9vmin; animation: fall-273 0.45s -7s ease-in infinite; } @keyframes fall-273 { 9.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(274) { opacity: 0.13; left: 30.2vw; border-left-width: 0.4vmin; animation: fall-274 0.15s -2s ease-in infinite; } @keyframes fall-274 { 7.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(275) { opacity: 0.65; left: 88.8vw; border-left-width: 6.7vmin; animation: fall-275 0.6s -9.5s ease-in infinite; } @keyframes fall-275 { 6.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(276) { opacity: 0.3; left: 93.2vw; border-left-width: 0.8vmin; animation: fall-276 1.35s -2.5s ease-in infinite; } @keyframes fall-276 { 3% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(277) { opacity: 0.9; left: 73.5vw; border-left-width: 4.7vmin; animation: fall-277 1.2s -9.5s ease-in infinite; } @keyframes fall-277 { 5.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(278) { opacity: 0.8; left: 22.9vw; border-left-width: 2.3vmin; animation: fall-278 2.25s -11s ease-in infinite; } @keyframes fall-278 { 7.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(279) { opacity: 0.76; left: 74.1vw; border-left-width: 2.1vmin; animation: fall-279 0.9s -9.5s ease-in infinite; } @keyframes fall-279 { 3.4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(280) { opacity: 0.35; left: 85vw; border-left-width: 2.9vmin; animation: fall-280 0.6s -6s ease-in infinite; } @keyframes fall-280 { 6.8% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(281) { opacity: 0.02; left: 99.4vw; border-left-width: 3.5vmin; animation: fall-281 1.95s -9.5s ease-in infinite; } @keyframes fall-281 { 1.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(282) { opacity: 0.84; left: 103.1vw; border-left-width: 2.6vmin; animation: fall-282 0.6s -5.5s ease-in infinite; } @keyframes fall-282 { 5.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(283) { opacity: 0.84; left: 41.9vw; border-left-width: 3.7vmin; animation: fall-283 2.1s -7.5s ease-in infinite; } @keyframes fall-283 { 4% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(284) { opacity: 0.23; left: 60.7vw; border-left-width: 1.7vmin; animation: fall-284 0.6s -10.5s ease-in infinite; } @keyframes fall-284 { 1.2% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(285) { opacity: 0.07; left: 0.3vw; border-left-width: 6.3vmin; animation: fall-285 0.75s -1s ease-in infinite; } @keyframes fall-285 { 5% { transform: rotate(var(--angle)) translateX(0); } to { transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin)); } } .drop:nth-child(286) { opacity: 0.67; left: 61.8vw; border-left-width: 4.6vmin; animation: fall-286 2.1s -7.5s ease-in infinite; } @keyframes fall-286 { 3.8% { transform: rotate(var(--angle)) translateX(0); } to { tran.........完整代码请登录后点击上方下载按钮下载查看
网友评论0