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));
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0