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%;
  }
.........完整代码请登录后点击上方下载按钮下载查看