js+css实现新年快乐下雪动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：js+css实现新年快乐下雪动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  
<style>
:root {
  --black: #130f33;
  --white: #fff;
}

body {
  font-family: Recursive, sans-serif;
  background-color: var(--black);
  width: 100%;
  height: 100%;
  color: var(--white);
  overflow: hidden;
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

main {
  padding: 1rem;
}

h1 {
  font-size: 4rem;
  display: grid;
  grid-template-columns: auto;
  grid-auto-flow: column;
  margin: 0 auto;
}
h1 span {
  --time-delay: calc(var(--delay));
  font-variation-settings: "wght" 300;
  letter-spacing: 0.2rem;
  font-size: 9vw;
  margin-right: var(--offset, 0);
  animation: bounce 1s cubic-bezier(0.5, 0, 0.5, 1) calc(var(--time-delay)) both;
}

@keyframes bounce {
  from {
    transform: translate3d(0, 100px, 0);
    font-variation-settings: "wght" 500, "CASL" 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    font-variation-settings: "wght" 900, "CASL" 1;
    font-size: 10vw;
  }
}
[class|=confetti] {
  position: absolute;
}

.confetti-0 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 28%;
  opacity: 1.4775406073;
  transform: rotate(260.5718354958deg);
  animation: drop-0 5.1512586352s 0.2482187303s infinite;
}

@keyframes drop-0 {
  100% {
    top: 110%;
    left: 35%;
  }
}
.confetti-1 {
  width: 2px;
  height: 0.8px;
  background-color: #794fc6;
  top: -10%;
  left: 96%;
  opacity: 0.9326683726;
  transform: rotate(153.4154343694deg);
  animation: drop-1 5.937101951s 0.9730380158s infinite;
}

@keyframes drop-1 {
  100% {
    top: 110%;
    left: 110%;
  }
}
.confetti-2 {
  width: 4px;
  height: 1.6px;
  background-color: #794fc6;
  top: -10%;
  left: 80%;
  opacity: 1.4102177695;
  transform: rotate(61.899650115deg);
  animation: drop-2 5.8895720424s 0.8598196598s infinite;
}

@keyframes drop-2 {
  100% {
    top: 110%;
    left: 93%;
  }
}
.confetti-3 {
  width: 2px;
  height: 0.8px;
  background-color: #794fc6;
  top: -10%;
  left: 99%;
  opacity: 0.9424893482;
  transform: rotate(345.909025647deg);
  animation: drop-3 5.3090225214s 0.3515310153s infinite;
}

@keyframes drop-3 {
  100% {
    top: 110%;
    left: 103%;
  }
}
.confetti-4 {
  width: 5px;
  height: 2px;
  background-color: #794fc6;
  top: -10%;
  left: 90%;
  opacity: 1.153061415;
  transform: rotate(244.6492595592deg);
  animation: drop-4 5.7022641567s 0.7673266951s infinite;
}

@keyframes drop-4 {
  100% {
    top: 110%;
    left: 92%;
  }
}
.confetti-5 {
  width: 8px;
  height: 3.2px;
  background-color: #794fc6;
  top: -10%;
  left: 79%;
  opacity: 1.3943276298;
  transform: rotate(47.3179061904deg);
  animation: drop-5 5.1688231148s 0.6559997413s infinite;
}

@keyframes drop-5 {
  100% {
    top: 110%;
    left: 90%;
  }
}
.confetti-6 {
  width: 1px;
  height: 0.4px;
  background-color: #794fc6;
  top: -10%;
  left: 57%;
  opacity: 0.5482394736;
  transform: rotate(217.136679352deg);
  animation: drop-6 5.7432507465s 0.4603366041s infinite;
}

@keyframes drop-6 {
  100% {
    top: 110%;
    left: 64%;
  }
}
.confetti-7 {
  width: 3px;
  height: 1.2px;
  background-color: #0874d0;
  top: -10%;
  left: 55%;
  opacity: 1.3925949532;
  transform: rotate(268.2342955338deg);
  animation: drop-7 5.6732549623s 0.8602764378s infinite;
}

@keyframes drop-7 {
  100% {
    top: 110%;
    left: 63%;
  }
}
.confetti-8 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 51%;
  opacity: 1.0504001241;
  transform: rotate(321.0597721269deg);
  animation: drop-8 5.8340464519s 0.478172099s infinite;
}

@keyframes drop-8 {
  100% {
    top: 110%;
    left: 60%;
  }
}
.confetti-9 {
  width: 2px;
  height: 0.8px;
  background-color: #0874d0;
  top: -10%;
  left: 56%;
  opacity: 0.7370001025;
  transform: rotate(13.4363734651deg);
  animation: drop-9 5.0897803474s 0.2041739427s infinite;
}

@keyframes drop-9 {
  100% {
    top: 110%;
    left: 60%;
  }
}
.confetti-10 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 98%;
  opacity: 1.410137216;
  transform: rotate(195.8687205827deg);
  animation: drop-10 5.2603956615s 0.3356855642s infinite;
}

@keyframes drop-10 {
  100% {
    top: 110%;
    left: 105%;
  }
}
.confetti-11 {
  width: 8px;
  height: 3.2px;
  background-color: #794fc6;
  top: -10%;
  left: 85%;
  opacity: 1.4531701629;
  transform: rotate(304.8844994347deg);
  animation: drop-11 5.2750863333s 0.2727023193s infinite;
}

@keyframes drop-11 {
  100% {
    top: 110%;
    left: 95%;
  }
}
.confetti-12 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 26%;
  opacity: 1.2547276884;
  transform: rotate(81.7916936123deg);
  animation: drop-12 5.4793087848s 0.5038932266s infinite;
}

@keyframes drop-12 {
  100% {
    top: 110%;
    left: 31%;
  }
}
.confetti-13 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 55%;
  opacity: 0.8782015326;
  transform: rotate(13.9072667535deg);
  animation: drop-13 5.9885085319s 0.2081339069s infinite;
}

@keyframes drop-13 {
  100% {
    top: 110%;
    left: 68%;
  }
}
.confetti-14 {
  width: 1px;
  height: 0.4px;
  background-color: #0874d0;
  top: -10%;
  left: 83%;
  opacity: 0.592418216;
  transform: rotate(348.2561296561deg);
  animation: drop-14 5.7051747239s 0.8487629417s infinite;
}

@keyframes drop-14 {
  100% {
    top: 110%;
    left: 88%;
  }
}
.confetti-15 {
  width: 5px;
  height: 2px;
  background-color: #794fc6;
  top: -10%;
  left: 38%;
  opacity: 0.5887445967;
  transform: rotate(173.4417925847deg);
  animation: drop-15 5.9175780448s 0.5968692347s infinite;
}

@keyframes drop-15 {
  100% {
    top: 110%;
    left: 53%;
  }
}
.confetti-16 {
  width: 6px;
  height: 2.4px;
  background-color: #794fc6;
  top: -10%;
  left: 32%;
  opacity: 1.4099915332;
  transform: rotate(27.807432646deg);
  animation: drop-16 5.6768950627s 0.785110648s infinite;
}

@keyframes drop-16 {
  100% {
    top: 110%;
    left: 37%;
  }
}
.confetti-17 {
  width: 4px;
  height: 1.6px;
  background-color: #0874d0;
  top: -10%;
  left: 2%;
  opacity: 0.8109148823;
  transform: rotate(266.0480008209deg);
  animation: drop-17 5.8784245338s 0.7678621529s infinite;
}

@keyframes drop-17 {
  100% {
    top: 110%;
    left: 16%;
  }
}
.confetti-18 {
  width: 1px;
  height: 0.4px;
  background-color: #0874d0;
  top: -10%;
  left: 45%;
  opacity: 1.3297441611;
  transform: rotate(275.7619142136deg);
  animation: drop-18 5.0057907184s 0.7557998915s infinite;
}

@keyframes drop-18 {
  100% {
    top: 110%;
    left: 53%;
  }
}
.confetti-19 {
  width: 7px;
  height: 2.8px;
  background-color: #0874d0;
  top: -10%;
  left: 14%;
  opacity: 1.3168628669;
  transform: rotate(56.8153206504deg);
  animation: drop-19 5.2646258747s 0.7784428208s infinite;
}

@keyframes drop-19 {
  100% {
    top: 110%;
    left: 21%;
  }
}
.confetti-20 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 30%;
  opacity: 1.2869401286;
  transform: rotate(291.8737092618deg);
  animation: drop-20 5.4644002244s 0.2819248369s infinite;
}

@keyframes drop-20 {
  100% {
    top: 110%;
    left: 32%;
  }
}
.confetti-21 {
  width: 3px;
  height: 1.2px;
  background-color: #0874d0;
  top: -10%;
  left: 13%;
  opacity: 0.6416596868;
  transform: rotate(195.0317244473deg);
  animation: drop-21 5.4811045663s 0.0786062876s infinite;
}

@keyframes drop-21 {
  100% {
    top: 110%;
    left: 24%;
  }
}
.confetti-22 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 56%;
  opacity: 1.3540420311;
  transform: rotate(151.1799344602deg);
  animation: drop-22 5.2481573292s 0.3939398755s infinite;
}

@keyframes drop-22 {
  100% {
    top: 110%;
    left: 58%;
  }
}
.confetti-23 {
  width: 8px;
  height: 3.2px;
  background-color: #794fc6;
  top: -10%;
  left: 93%;
  opacity: 1.4450427267;
  transform: rotate(280.7125651693deg);
  animation: drop-23 5.3127638578s 0.7323515625s infinite;
}

@keyframes drop-23 {
  100% {
    top: 110%;
    left: 98%;
  }
}
.confetti-24 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 35%;
  opacity: 1.3634878414;
  transform: rotate(61.4229989871deg);
  animation: drop-24 5.1985218248s 0.0570656172s infinite;
}

@keyframes drop-24 {
  100% {
    top: 110%;
    left: 46%;
  }
}
.confetti-25 {
  width: 5px;
  height: 2px;
  background-color: #794fc6;
  top: -10%;
  left: 48%;
  opacity: 0.9404250773;
  transform: rotate(328.7409090207deg);
  animation: drop-25 5.637590197s 0.4818657868s infinite;
}

@keyframes drop-25 {
  100% {
    top: 110%;
    left: 58%;
  }
}
.confetti-26 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 36%;
  opacity: 0.7854726236;
  transform: rotate(240.8838147857deg);
  animation: drop-26 5.0430866374s 0.3124350234s infinite;
}

@keyframes drop-26 {
  100% {
    top: 110%;
    left: 40%;
  }
}
.confetti-27 {
  width: 6px;
  height: 2.4px;
  background-color: #0874d0;
  top: -10%;
  left: 16%;
  opacity: 0.7469869894;
  transform: rotate(137.860926593deg);
  animation: drop-27 5.1701073007s 0.0400672275s infinite;
}

@keyframes drop-27 {
  100% {
    top: 110%;
    left: 21%;
  }
}
.confetti-28 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 25%;
  opacity: 0.6684346766;
  transform: rotate(303.5772005591deg);
  animation: drop-28 5.6186464292s 0.6577837327s infinite;
}

@keyframes drop-28 {
  100% {
    top: 110%;
    left: 40%;
  }
}
.confetti-29 {
  width: 7px;
  height: 2.8px;
  background-color: #794fc6;
  top: -10%;
  left: 76%;
  opacity: 0.6048817727;
  transform: rotate(297.3977580006deg);
  animation: drop-29 5.577510399s 0.6369856464s infinite;
}

@keyframes drop-29 {
  100% {
    top: 110%;
    left: 88%;
  }
}
.confetti-30 {
  width: 1px;
  height: 0.4px;
  background-color: #794fc6;
  top: -10%;
  left: 53%;
  opacity: 0.6036239851;
  transform: rotate(178.6750679666deg);
  animation: drop-30 5.068521196s 0.7849853814s infinite;
}

@keyframes drop-30 {
  100% {
    top: 110%;
    left: 57%;
  }
}
.confetti-31 {
  width: 8px;
  height: 3.2px;
  background-color: #794fc6;
  top: -10%;
  left: 96%;
  opacity: 1.4915021324;
  transform: rotate(190.3859331559deg);
  animation: drop-31 5.3999025956s 0.5677977131s infinite;
}

@keyframes drop-31 {
  100% {
    top: 110%;
    left: 103%;
  }
}
.confetti-32 {
  width: 4px;
  height: 1.6px;
  background-color: #794fc6;
  top: -10%;
  left: 96%;
  opacity: 1.3585732171;
  transform: rotate(123.9019812575deg);
  animation: drop-32 5.5811784375s 0.717063246s infinite;
}

@keyframes drop-32 {
  100% {
    top: 110%;
    left: 103%;
  }
}
.confetti-33 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 11%;
  opacity: 1.4814714261;
  transform: rotate(176.8200552633deg);
  animation: drop-33 5.0048672593s 0.4964439886s infinite;
}

@keyframes drop-33 {
  100% {
    top: 110%;
    left: 23%;
  }
}
.confetti-34 {
  width: 3px;
  height: 1.2px;
  background-color: #0874d0;
  top: -10%;
  left: 3%;
  opacity: 1.4745606659;
  transform: rotate(119.5865228859deg);
  animation: drop-34 5.4731145899s 0.3375503395s infinite;
}

@keyframes drop-34 {
  100% {
    top: 110%;
    left: 10%;
  }
}
.confetti-35 {
  width: 8px;
  height: 3.2px;
  background-color: #794fc6;
  top: -10%;
  left: 54%;
  opacity: 0.5649128545;
  transform: rotate(103.1295006709deg);
  animation: drop-35 5.7919351549s 0.7549795223s infinite;
}

@keyframes drop-35 {
  100% {
    top: 110%;
    left: 57%;
  }
}
.confetti-36 {
  width: 8px;
  height: 3.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 29%;
  opacity: 1.3279453612;
  transform: rotate(106.7922992889deg);
  animation: drop-36 5.2188499719s 0.3983806474s infinite;
}

@keyframes drop-36 {
  100% {
    top: 110%;
    left: 30%;
  }
}
.confetti-37 {
  width: 5px;
  height: 2px;
  background-color: #0874d0;
  top: -10%;
  left: 93%;
  opacity: 1.1476897165;
  transform: rotate(356.9789492066deg);
  animation: drop-37 5.5023661668s 0.0249763109s infinite;
}

@keyframes drop-37 {
  100% {
    top: 110%;
    left: 97%;
  }
}
.confetti-38 {
  width: 8px;
  height: 3.2px;
  background-color: #0874d0;
  top: -10%;
  left: 40%;
  opacity: 1.3267655824;
  transform: rotate(182.3936212243deg);
  animation: drop-38 5.0229876451s 0.2812268453s infinite;
}

@keyframes drop-38 {
  100% {
    top: 110%;
    left: 43%;
  }
}
.confetti-39 {
  width: 4px;
  height: 1.6px;
  background-color: #0874d0;
  top: -10%;
  left: 59%;
  opacity: 0.5707195343;
  transform: rotate(37.4903755325deg);
  animation: drop-39 5.5406642569s 0.4694036138s infinite;
}

@keyframes drop-39 {
  100% {
    top: 110%;
    left: 69%;
  }
}
.confetti-40 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 76%;
  opacity: 0.6187092703;
  transform: rotate(329.7076750336deg);
  animation: drop-40 5.5296065153s 0.2185159149s infinite;
}

@keyframes drop-40 {
  100% {
    top: 110%;
    left: 80%;
  }
}
.confetti-41 {
  width: 8px;
  height: 3.2px;
  background-color: #794fc6;
  top: -10%;
  left: 32%;
  opacity: 0.5131718247;
  transform: rotate(20.2963812408deg);
  animation: drop-41 5.6906355312s 0.4295958073s infinite;
}

@keyframes drop-41 {
  100% {
    top: 110%;
    left: 44%;
  }
}
.confetti-42 {
  width: 5px;
  height: 2px;
  background-color: #794fc6;
  top: -10%;
  left: 77%;
  opacity: 0.5512724793;
  transform: rotate(317.4441713477deg);
  animation: drop-42 5.7694980094s 0.4173661841s infinite;
}

@keyframes drop-42 {
  100% {
    top: 110%;
    left: 79%;
  }
}
.confetti-43 {
  width: 8px;
  height: 3.2px;
  background-color: #794fc6;
  top: -10%;
  left: 63%;
  opacity: 0.8112450483;
  transform: rotate(139.6895996723deg);
  animation: drop-43 5.5611533687s 0.0355794308s infinite;
}

@keyframes drop-43 {
  100% {
    top: 110%;
    left: 74%;
  }
}
.confetti-44 {
  width: 5px;
  height: 2px;
  background-color: #0874d0;
  top: -10%;
  left: 96%;
  opacity: 0.6248796023;
  transform: rotate(258.9623266793deg);
  animation: drop-44 5.3714460101s 0.6545467678s infinite;
}

@keyframes drop-44 {
  100% {
    top: 110%;
    left: 101%;
  }
}
.confetti-45 {
  width: 5px;
  height: 2px;
  background-color: #794fc6;
  top: -10%;
  left: 97%;
  opacity: 1.0193305525;
  transform: rotate(262.6928013622deg);
  animation: drop-45 5.8905576308s 0.1236765714s infinite;
}

@keyframes drop-45 {
  100% {
    top: 110%;
    left: 110%;
  }
}
.confetti-46 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 68%;
  opacity: 0.7110605581;
  transform: rotate(329.9458388976deg);
  animation: drop-46 5.2881272535s 0.1131692825s infinite;
}

@keyframes drop-46 {
  100% {
    top: 110%;
    left: 73%;
  }
}
.confetti-47 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 76%;
  opacity: 0.8857892836;
  transform: rotate(257.7065243998deg);
  animation: drop-47 5.3006590127s 0.4290285811s infinite;
}

@keyframes drop-47 {
  100% {
    top: 110%;
    left: 91%;
  }
}
.confetti-48 {
  width: 3px;
  height: 1.2px;
  background-color: #ffbf00;
  top: -10%;
  left: 7%;
  opacity: 0.922289635;
  transform: rotate(345.2531273238deg);
  animation: drop-48 5.4668749488s 0.3848214003s infinite;
}

@keyframes drop-48 {
  100% {
    top: 110%;
    left: 20%;
  }
}
.confetti-49 {
  width: 4px;
  height: 1.6px;
  background-color: #794fc6;
  top: -10%;
  left: 95%;
  opacity: 0.8481365886;
  transform: rotate(250.0188364431deg);
  animation: drop-49 5.8935420571s 0.8309566387s infinite;
}

@keyframes drop-49 {
  100% {
    top: 110%;
    left: 104%;
  }
}
.confetti-50 {
  width: 6px;
  height: 2.4px;
  background-color: #0874d0;
  top: -10%;
  left: 59%;
  opacity: 0.7351650047;
  transform: rotate(290.5152380343deg);
  animation: drop-50 5.6737896646s 0.9075350215s infinite;
}

@keyframes drop-50 {
  100% {
    top: 110%;
    left: 69%;
  }
}
.confetti-51 {
  width: 1px;
  height: 0.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 74%;
  opacity: 0.8105183757;
  transform: rotate(118.3527282893deg);
  animation: drop-51 5.8749404869s 0.7485664135s infinite;
}

@keyframes drop-51 {
  100% {
    top: 110%;
    left: 83%;
  }
}
.confetti-52 {
  width: 1px;
  height: 0.4px;
  background-color: #0874d0;
  top: -10%;
  left: 57%;
  opacity: 1.201378787;
  transform: rotate(122.0034603578deg);
  animation: drop-52 5.2723850761s 0.225801607s infinite;
}

@keyframes drop-52 {
  100% {
    top: 110%;
    left: 70%;
  }
}
.confetti-53 {
  width: 1px;
  height: 0.4px;
  background-color: #0874d0;
  top: -10%;
  left: 47%;
  opacity: 1.3471760927;
  transform: rotate(330.0790418515deg);
  animation: drop-53 5.4257060718s 0.4667814335s infinite;
}

@keyframes drop-53 {
  100% {
    top: 110%;
    left: 60%;
  }
}
.confetti-54 {
  width: 8px;
  height: 3.2px;
  background-color: #794fc6;
  top: -10%;
  left: 78%;
  opacity: 0.82017928;
  transform: rotate(266.2163763449deg);
  animation: drop-54 5.2355838795s 0.4236121091s infinite;
}

@keyframes drop-54 {
  100% {
    top: 110%;
    left: 80%;
  }
}
.confetti-55 {
  width: 7px;
  height: 2.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 98%;
  opacity: 1.2169333182;
  transform: rotate(56.240088916deg);
  animation: drop-55 5.0192101694s 0.0691275832s infinite;
}

@keyframes drop-55 {
  100% {
    top: 110%;
    left: 107%;
  }
}
.confetti-56 {
  width: 1px;
  height: 0.4px;
  background-color: #0874d0;
  top: -10%;
  left: 2%;
  opacity: 1.0388525188;
  transform: rotate(139.5727504223deg);
  animation: drop-56 5.500884821s 0.5510842122s infinite;
}

@keyframes drop-56 {
  100% {
    top: 110%;
    left: 10%;
  }
}
.confetti-57 {
  width: 3px;
  height: 1.2px;
  background-color: #794fc6;
  top: -10%;
  left: 90%;
  opacity: 0.7393762246;
  transform: rotate(239.1202810567deg);
  animation: drop-57 5.2858755432s 0.9173466014s infinite;
}

@keyframes drop-57 {
  100% {
    top: 110%;
    left: 96%;
  }
}
.confetti-58 {
  width: 3px;
  height: 1.2px;
  background-color: #0874d0;
  top: -10%;
  left: 6%;
  opacity: 0.7280164726;
  transform: rotate(130.8853759266deg);
  animation: drop-58 5.1003685589s 0.0739061042s infinite;
}

@keyframes drop-58 {
  100% {
    top: 110%;
    left: 16%;
  }
}
.confetti-59 {
  width: 2px;
  height: 0.8px;
  background-color: #0874d0;
  top: -10%;
  left: 93%;
  opacity: 1.4868564048;
  transform: rotate(118.5488573462deg);
  animation: drop-59 5.2951590882s 0.2270009694s infinite;
}

@keyframes drop-59 {
  100% {
    top: 110%;
    left: 97%;
  }
}
.confetti-60 {
  width: 3px;
  height: 1.2px;
  background-color: #0874d0;
  top: -10%;
  left: 19%;
  opacity: 0.640341605;
  transform: rotate(296.316795957deg);
  animation: drop-60 5.5289223745s 0.136883791s infinite;
}

@keyframes drop-60 {
  100% {
    top: 110%;
    left: 29%;
  }
}
.confetti-61 {
  width: 7px;
  height: 2.8px;
  background-color: #794fc6;
  top: -10%;
  left: 32%;
  opacity: 0.5416541587;
  transform: rotate(90.759511314deg);
  animation: drop-61 5.9698136684s 0.0010047818s infinite;
}

@keyframes drop-61 {
  100% {
    top: 110%;
    left: 46%;
  }
}
.confetti-62 {
  width: 2px;
  height: 0.8px;
  background-color: #794fc6;
  top: -10%;
  left: 93%;
  opacity: 1.1777317713;
  transform: rotate(279.1689007216deg);
  animation: drop-62 5.520067207s 0.4413050652s infinite;
}

@keyframes drop-62 {
  100% {
    top: 110%;
    left: 108%;
  }
}
.confetti-63 {
  width: 6px;
  height: 2.4px;
  background-color: #0874d0;
  top: -10%;
  left: 89%;
  opacity: 1.0721956949;
  transform: rotate(272.7180040109deg);
  animation: drop-63 5.429074078s 0.9294491121s infinite;
}

@keyframes drop-63 {
  100% {
    top: 110%;
    left: 102%;
  }
}
.confetti-64 {
  width: 4px;
  height: 1.6px;
  background-color: #794fc6;
  top: -10%;
  left: 1%;
  opacity: 0.6365664094;
  transform: rotate(127.6645077042deg);
  animation: drop-64 5.9972751771s 0.8337549497s infinite;
}

@keyframes drop-64 {
  100% {
    top: 110%;
    left: 12%;
  }
}
.confetti-65 {
  width: 7px;
  height: 2.8px;
  background-color: #794fc6;
  top: -10%;
  left: 19%;
  opacity: 1.4839983036;
  transform: rotate(194.5587520123deg);
  animation: drop-65 5.9800172501s 0.5235892491s infinite;
}

@keyframes drop-65 {
  100% {
    top: 110%;
    left: 26%;
  }
}
.confetti-66 {
  width: 5px;
  height: 2px;
  background-color: #ffbf00;
  top: -10%;
  left: 13%;
  opacity: 1.4444515292;
  transform: rotate(300.214047975deg);
  animation: drop-66 5.5203387297s 0.8435742295s infinite;
}

@keyframes drop-66 {
  100% {
    top: 110%;
    left: 17%;
  }
}
.confetti-67 {
  width: 4px;
  height: 1.6px;
  background-color: #ffbf00;
  top: -10%;
  left: 68%;
  opacity: 1.1471282673;
  transform: rotate(156.358519021deg);
  animation: drop-67 5.3122773792s 0.5413231451s infinite;
}

@keyframes drop-67 {
  100% {
    top: 110%;
    left: 76%;
  }
}
.confetti-68 {
  width: 5px;
  height: 2px;
  background-color: #0874d0;
  top: -10%;
  left: 93%;
  opacity: 0.9947590114;
  transform: rotate(34.2070244513deg);
  animation: drop-68 5.1857132062s 0.285237729s infinite;
}

@keyframes drop-68 {
  100% {
    top: 110%;
    left: 102%;
  }
}
.confetti-69 {
  width: 2px;
  height: 0.8px;
  background-color: #ffbf00;
  top: -10%;
  left: 69%;
  opacity: 0.6138412884;
  transform: rotate(33.8713874585deg);
  animation: drop-69 5.272176415s 0.0892411821s infinite;
}

@keyframes drop-69 {
  100% {
    top: 110%;
    left: 72%;
  }
}
.confetti-70 {
  width: 5px;
  height: 2px;
  background-color: #794fc6;
  top: -10%;
  left: 8%;
  opacity: 1.2923987691;
  transform: rotate(309.0708473342deg);
  animation: drop-70 5.0233600237s 0.3598304401s infinite;
}

@keyframes drop-70 {
  100% {
    top: 110%;
    left: 23%;
  }
}
.confetti-71 {
  width: 7px;
  height: 2.8px;
  background-color: #794fc6;
  top: -10%;
  left: 9%;
  opacity: 1.2647698832;
  transform: rotate(267.3165271663deg);
  animation: drop-71 5.0643709217s 0.7925851813s infinite;
}

@keyframes drop-71 {
  100% {
    top: 110%;
    left: 11%;
  }
}
.confetti-72 {
  width: 1px;
  height: 0.4px;
  background-color: #0874d0;
  top: -10%;
  left: 73%;
  opacity: 0.5081326642;
  transform: rotate(10.2682366832deg);
  animation: drop-72 5.2496104514s 0.0402359007s infinite;
}

@keyframes drop-72 {
  100% {
    top: 110%;
    left: 74%;
  }
}
.confetti-73 {
  width: 5px;
  height: 2px;
  background-color: #794fc6;
  top: -10%;
  left: 29%;
  opacity: 1.2046726153;
  transform: rotate(263.2945991495deg);
  animation: drop-73 5.7288357866s 0.0666662533s infinite;
}

@keyframes drop-73 {
  100% {
    top: 110%;
    left: 33%;
  }
}
.confetti-74 {
  width: 5px;
  height: 2px;
  background-color: #794fc6;
  top: -10%;
  left: 26%;
  opacity: 1.4534394542;
  transform: rotate(7.8004240323deg);
  animation: drop-74 5.0614191285s 0.9856015399s infinite;
}

@keyframes drop-74 {
  100% {
    top: 110%;
    left: 36%;
  }
}
.confetti-75 {
  width: 5px;
  height: 2px;
  background-color: #794fc6;
  top: -10%;
  left: 25%;
  opacity: 1.1243719677;
  transform: rotate(100.0235706586deg);
  animation: drop-75 5.3751017716s 0.55534621s infinite;
}

@keyframes drop-75 {
  100% {
    top: 110%;
    left: 40%;
  }
}
.confetti-76 {
  width: 6px;
  height: 2.4px;
  background-color: #ffbf00;
  top: -10%;
  left: 87%;
  opacity: 1.3311269164;
  transform: rotate(330.5767957887deg);
  animation: drop-76 5.6985449256s 0.670831674s infinite;
}

@keyframes drop-76 {.........完整代码请登录后点击上方下载按钮下载查看