生日蛋糕生日祝福动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：生日蛋糕生日祝福动画效果
代码标签：效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

body {
  position: relative;
  background: #f4f5fb;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  position: absolute;
}

*:before,
*:after {
  content: "";
  position: absolute;
}

.container {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cake {
  width: 80%;
  height: 80%;
  left: 10%;
  bottom: 15%;
}

.filling {
  height: 10px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  top: 50%;
}

.tier {
  left: 10%;
  width: 80%;
  height: 50px;
  border-radius: 5px;
}
.tier .icing-group {
  width: 100%;
  height: 30px;
  overflow: hidden;
}
.tier .icing-group .icing {
  border-radius: 0 0 20px 20px;
  width: 40px;
  height: 20px;
  background-color: #f4f5fb;
}
.tier:after {
  border-radius: 0 5px 5px 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
}

.tier-1 {
  background-color: #f2abe7;
  bottom: 0;
}
.tier-1 .filling {
  background-color: #eb7fda;
}

.tier-2 {
  bottom: 50px;
  width: 60%;
  height: 45px;
  left: 20%;
  background-color: #9fa3ec;
}
.tier-2 .filling {
  background-color: #747ae4;
}

.tier-3 {
  bottom: 95px;
  width: 40%;
  height: 40px;
  left: 30%;
  background-color: #86d2e1;
}
.tier-3 .filling {
  background-color: #5dc3d7;
}

.icing:nth-child(1) {
  left: -20px;
}

.icing:nth-child(2) {
  left: 10px;
}

.icing:nth-child(3) {
  left: 40px;
}

.icing:nth-child(4) {
  left: 70px;
}

.icing:nth-child(5) {
  left: 100px;
}

.icing:nth-child(6) {
  left: 130px;
}

.icing:nth-child(7) {
  left: 160px;
}

.icing:nth-child(8) {
  left: 190px;
}

.icing:nth-child(9) {
  left: 220px;
}

.candles {
  width: 40%;
  left: 30%;
  height: 30px;
  bottom: 135px;
}
.candles .candle {
  background-color: #f2abe7;
  left: 27px;
  width: 10px;
  height: 25px;
  bottom: 0;
}
.candles .candle:after {
  width: 50%;
  height: 100%;
  right: 0;
  background-color: rgba(0, 0, 0, 0.1);
}
.candles .candle .flame {
  width: 15px;
  height: 15px;
  bottom: 30px;
  left: -3px;
}
.candles .candle .flame .flame-in {
  width: 100%;
  height: 100%;
  background-color: #fec31e;
  border-radius: 0 50% 50%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-animation: flame 2s linear infinite;
          animation: flame 2s linear infinite;
}

@-webkit-keyframes flame {
  50% {
    -webkit-transform: scale(0.8) rotate(45deg);
            transform: scale(0.8) rotate(45deg);
  }
}

@keyframes flame {
  50% {
    -webkit-transform: scale(0.8) rotate(45deg);
            transform: scale(0.8) rotate(45deg);
  }
}
.confetti {
  position: absolute;
  z-index: 999;
}

.confetti .rotate {
  -webkit-animation: driftRotate 1s infinite both ease-in-out;
          animation: driftRotate 1s infinite both ease-in-out;
  width: 100%;
  height: 100%;
}

.confetti .askew {
  width: 100%;
  height: 100%;
  -webkit-animation: drift 1s infinite alternate both ease-in-out;
          animation: drift 1s infinite alternate both ease-in-out;
}

.confetti:nth-child(0) .askew {
  -webkit-animation-duration: 1.62s;
          animation-duration: 1.62s;
  -webkit-animation-delay: -0.3888s;
          animation-delay: -0.3888s;
}

.confetti:nth-child(0) .rotate {
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
  -webkit-animation-delay: -0.336s;
          animation-delay: -0.336s;
}

.confetti:nth-child(1) .askew {
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  -webkit-animation-delay: -1.287s;
          animation-delay: -1.287s;
}

.confetti:nth-child(1) .rotate {
  -webkit-animation-duration: 1.47s;
          animation-duration: 1.47s;
  -webkit-animation-delay: -0.0882s;
          animation-delay: -0.0882s;
}

.confetti:nth-child(2) .askew {
  -webkit-animation-duration: 1.84s;
          animation-duration: 1.84s;
  -webkit-animation-delay: -1.8216s;
          animation-delay: -1.8216s;
}

.confetti:nth-child(2) .rotate {
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
  -webkit-animation-delay: -0.196s;
          animation-delay: -0.196s;
}

.confetti:nth-child(3) .askew {
  -webkit-animation-duration: 1.31s;
          animation-duration: 1.31s;
  -webkit-animation-delay: -1.1135s;
          animation-delay: -1.1135s;
}

.confetti:nth-child(3) .rotate {
  -webkit-animation-duration: 1.79s;
          animation-duration: 1.79s;
  -webkit-animation-delay: -1.6468s;
          animation-delay: -1.6468s;
}

.confetti:nth-child(4) .askew {
  -webkit-animation-duration: 1.25s;
          animation-duration: 1.25s;
  -webkit-animation-delay: -0.1125s;
          animation-delay: -0.1125s;
}

.confetti:nth-child(4) .rotate {
  -webkit-animation-duration: 1.11s;
          animation-duration: 1.11s;
  -webkit-animation-delay: -0.8436s;
          animation-delay: -0.8436s;
}

.confetti:nth-child(5) .askew {
  -webkit-animation-duration: 1.61s;
          animation-duration: 1.61s;
  -webkit-animation-delay: -1.5134s;
          animation-delay: -1.5134s;
}

.confetti:nth-child(5) .rotate {
  -webkit-animation-duration: 1.67s;
          animation-duration: 1.67s;
  -webkit-animation-delay: -1.4696s;
          animation-delay: -1.4696s;
}

.confetti:nth-child(6) .askew {
  -webkit-animation-duration: 1.54s;
          animation-duration: 1.54s;
  -webkit-animation-delay: -0.4774s;
          animation-delay: -0.4774s;
}

.confetti:nth-child(6) .rotate {
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  -webkit-animation-delay: -0.208s;
          animation-delay: -0.208s;
}

.confetti:nth-child(7) .askew {
  -webkit-animation-duration: 1.27s;
          animation-duration: 1.27s;
  -webkit-animation-delay: -0.762s;
          animation-delay: -0.762s;
}

.confetti:nth-child(7) .rotate {
  -webkit-animation-duration: 1.18s;
          animation-duration: 1.18s;
  -webkit-animation-delay: -0.4012s;
          animation-delay: -0.4012s;
}

.confetti:nth-child(8) .askew {
  -webkit-animation-duration: 1.91s;
          animation-duration: 1.91s;
  -webkit-animation-delay: -0.9168s;
          animation-delay: -0.9168s;
}

.confetti:nth-child(8) .rotate {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-delay: -0.66s;
          animation-delay: -0.66s;
}

.confetti:nth-child(9) .askew {
  -webkit-animation-duration: 1.77s;
          animation-duration: 1.77s;
  -webkit-animation-delay: -1.0266s;
          animation-delay: -1.0266s;
}

.confetti:nth-child(9) .rotate {
  -webkit-animation-duration: 1.68s;
          animation-duration: 1.68s;
  -webkit-animation-delay: -1.092s;
          animation-delay: -1.092s;
}

.confetti:nth-child(10) .askew {
  -webkit-animation-duration: 1.03s;
          animation-duration: 1.03s;
  -webkit-animation-delay: -0.5871s;
          animation-delay: -0.5871s;
}

.confetti:nth-child(10) .rotate {
  -webkit-animation-duration: 1.66s;
          animation-duration: 1.66s;
  -webkit-animation-delay: -0.4482s;
          animation-delay: -0.4482s;
}

.confetti:nth-child(11) .askew {
  -webkit-animation-duration: 1.99s;
          animation-duration: 1.99s;
  -webkit-animation-delay: -0.0398s;
          animation-delay: -0.0398s;
}

.confetti:nth-child(11) .rotate {
  -webkit-animation-duration: 1.17s;
          animation-duration: 1.17s;
  -webkit-animation-delay: -0.2457s;
          animation-delay: -0.2457s;
}

.confetti:nth-child(12) .askew {
  -webkit-animation-duration: 1.81s;
          animation-duration: 1.81s;
  -webkit-animation-delay: -0.6878s;
          animation-delay: -0.6878s;
}

.confetti:nth-child(12) .rotate {
  -webkit-animation-duration: 1.07s;
          animation-duration: 1.07s;
  -webkit-animation-delay: -0.7276s;
          animation-delay: -0.7276s;
}

.confetti:nth-child(13) .askew {
  -webkit-animation-duration: 1.92s;
          animation-duration: 1.92s;
  -webkit-animation-delay: -1.3824s;
          animation-delay: -1.3824s;
}

.confetti:nth-child(13) .rotate {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: -1.14s;
          animation-delay: -1.14s;
}

.confetti:nth-child(14) .askew {
  -webkit-animation-duration: 1.28s;
          animation-duration: 1.28s;
  -webkit-animation-delay: -0.8576s;
          animation-delay: -0.8576s;
}

.confetti:nth-child(14) .rotate {
  -webkit-animation-duration: 1.75s;
          animation-duration: 1.75s;
  -webkit-animation-delay: -0.28s;
          animation-delay: -0.28s;
}

.confetti:nth-child(15) .askew {
  -webkit-animation-duration: 1.38s;
          animation-duration: 1.38s;
  -webkit-animation-delay: -0.8694s;
          animation-delay: -0.8694s;
}

.confetti:nth-child(15) .rotate {
  -webkit-animation-duration: 1.96s;
          animation-duration: 1.96s;
  -webkit-animation-delay: -0.7252s;
          animation-delay: -0.7252s;
}

.confetti:nth-child(16) .askew {
  -webkit-animation-duration: 1.02s;
          animation-duration: 1.02s;
  -webkit-animation-delay: -0.3264s;
          animation-delay: -0.3264s;
}

.confetti:nth-child(16) .rotate {
  -webkit-animation-duration: 1.04s;
          animation-duration: 1.04s;
  -webkit-animation-delay: -0.9152s;
          animation-delay: -0.9152s;
}

.confetti:nth-child(17) .askew {
  -webkit-animation-duration: 1.85s;
          animation-duration: 1.85s;
  -webkit-animation-delay: -1.0545s;
          animation-delay: -1.0545s;
}

.confetti:nth-child(17) .rotate {
  -webkit-animation-duration: 1.07s;
          animation-duration: 1.07s;
  -webkit-animation-delay: -0.6741s;
          animation-delay: -0.6741s;
}

.confetti:nth-child(18) .askew {
  -webkit-animation-duration: 1.42s;
          animation-duration: 1.42s;
  -webkit-animation-delay: -1.0224s;
          animation-delay: -1.0224s;
}

.confetti:nth-child(18) .rotate {
  -webkit-animation-duration: 1.13s;
          animation-duration: 1.13s;
  -webkit-animation-delay: -1.0735s;
          animation-delay: -1.0735s;
}

.confetti:nth-child(19) .askew {
  -webkit-animation-duration: 1.97s;
          animation-duration: 1.97s;
  -webkit-animation-delay: -1.3396s;
          animation-delay: -1.3396s;
}

.confetti:nth-child(19) .rotate {
  -webkit-animation-duration: 1.04s;
          animation-duration: 1.04s;
  -webkit-animation-delay: -0.3744s;
          animation-delay: -0.3744s;
}

.confetti:nth-child(20) .askew {
  -webkit-animation-duration: 1.81s;
          animation-duration: 1.81s;
  -webkit-animation-delay: -0.3982s;
          animation-delay: -0.3982s;
}

.confetti:nth-child(20) .rotate {
  -webkit-animation-duration: 1.63s;
          animation-duration: 1.63s;
  -webkit-animation-delay: -0.7172s;
          animation-delay: -0.7172s;
}

.confetti:nth-child(21) .askew {
  -webkit-animation-duration: 1.87s;
          animation-duration: 1.87s;
  -webkit-animation-delay: -0.4862s;
          animation-delay: -0.4862s;
}

.confetti:nth-child(21) .rotate {
  -webkit-animation-duration: 1.96s;
          animation-duration: 1.96s;
  -webkit-animation-delay: -1.8424s;
          animation-delay: -1.8424s;
}

.confetti:nth-child(22) .askew {
  -webkit-animation-duration: 1.08s;
          animation-duration: 1.08s;
  -webkit-animation-delay: -0.702s;
          animation-delay: -0.702s;
}

.confetti:nth-child(22) .rotate {
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
  -webkit-animation-delay: -1.067s;
          animation-delay: -1.067s;
}

.confetti:nth-child(23) .askew {
  -webkit-animation-duration: 1.45s;
          animation-duration: 1.45s;
  -webkit-animation-delay: -0.4785s;
          animation-delay: -0.4785s;
}

.confetti:nth-child(23) .rotate {
  -webkit-animation-duration: 1.85s;
          animation-duration: 1.85s;
  -webkit-animation-delay: -1.7945s;
          animation-delay: -1.7945s;
}

.confetti:nth-child(24) .askew {
  -webkit-animation-duration: 1.01s;
          animation-duration: 1.01s;
  -webkit-animation-delay: -0.3939s;
          animation-delay: -0.3939s;
}

.confetti:nth-child(24) .rotate {
  -webkit-animation-duration: 1.18s;
          animation-duration: 1.18s;
  -webkit-animation-delay: -0.4248s;
          animation-delay: -0.4248s;
}

.confetti:nth-child(25) .askew {
  -webkit-animation-duration: 1.91s;
          animation-duration: 1.91s;
  -webkit-animation-delay: -0.4202s;
          animation-delay: -0.4202s;
}

.confetti:nth-child(25) .rotate {
  -webkit-animation-duration: 1.42s;
          animation-duration: 1.42s;
  -webkit-animation-delay: -0.5964s;
          animation-delay: -0.5964s;
}

.confetti:nth-child(26) .askew {
  -webkit-animation-duration: 1.28s;
          animation-duration: 1.28s;
  -webkit-animation-delay: -0.4224s;
          animation-delay: -0.4224s;
}

.confetti:nth-child(26) .rotate {
  -webkit-animation-duration: 1.42s;
          animation-duration: 1.42s;
  -webkit-animation-delay: -0.3266s;
          animation-delay: -0.3266s;
}

.confetti:nth-child(27) .askew {
  -webkit-animation-duration: 1.44s;
          animation-duration: 1.44s;
  -webkit-animation-delay: -1.1232s;
          animation-delay: -1.1232s;
}

.confetti:nth-child(27) .rotate {
  -webkit-animation-duration: 1.33s;
          animation-duration: 1.33s;
  -webkit-animation-delay: -0.1995s;
          animation-delay: -0.1995s;
}

.confetti:nth-child(28) .askew {
  -webkit-animation-duration: 1.49s;
          animation-duration: 1.49s;
  -webkit-animation-delay: -0.9387s;
          animation-delay: -0.9387s;
}

.confetti:nth-child(28) .rotate {
  -webkit-animation-duration: 1.64s;
          animation-duration: 1.64s;
  -webkit-animation-delay: -0.0656s;
          animation-delay: -0.0656s;
}

.confetti:nth-child(29) .askew {
  -webkit-animation-duration: 1.44s;
          animation-duration: 1.44s;
  -webkit-animation-delay: -0.7632s;
          animation-delay: -0.7632s;
}

.confetti:nth-child(29) .rotate {
  -webkit-animation-duration: 1.57s;
          animation-duration: 1.57s;
  -webkit-animation-delay: -1.1304s;
          animation-delay: -1.1304s;
}

.confetti:nth-child(30) .askew {
  -webkit-animation-duration: 1.95s;
          animation-duration: 1.95s;
  -webkit-animation-delay: -1.4235s;
          animation-delay: -1.4235s;
}

.confetti:nth-child(30) .rotate {
  -webkit-animation-duration: 1.46s;
          animation-duration: 1.46s;
  -webkit-animation-delay: -1.1534s;
          animation-delay: -1.1534s;
}

.confetti:nth-child(31) .askew {
  -webkit-animation-duration: 1.09s;
          animation-duration: 1.09s;
  -webkit-animation-delay: -0.8284s;
          animation-delay: -0.8284s;
}

.confetti:nth-child(31) .rotate {
  -webkit-animation-duration: 1.61s;
          animation-duration: 1.61s;
  -webkit-animation-delay: -0.7728s;
          animation-delay: -0.7728s;
}

.confetti:nth-child(32) .askew {
  -webkit-animation-duration: 1.19s;
          animation-duration: 1.19s;
  -webkit-animation-delay: -1.1067s;
          animation-delay: -1.1067s;
}

.confetti:nth-child(32) .rotate {
  -webkit-animation-duration: 1.12s;
          animation-duration: 1.12s;
  -webkit-animation-delay: -0.392s;
          animation-delay: -0.392s;
}

.confetti:nth-child(33) .askew {
  -webkit-animation-duration: 1.26s;
          animation-duration: 1.26s;
  -webkit-animation-delay: -1.197s;
          animation-delay: -1.197s;
}

.confetti:nth-child(33) .rotate {
  -webkit-animation-duration: 1.44s;
          animation-duration: 1.44s;
  -webkit-animation-delay: -1.2096s;
          animation-delay: -1.2096s;
}

.confetti:nth-child(34) .askew {
  -webkit-animation-duration: 1.81s;
          animation-duration: 1.81s;
  -webkit-animation-delay: -1.267s;
          animation-delay: -1.267s;
}

.confetti:nth-child(34) .rotate {
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  -webkit-animation-delay: -1.001s;
          animation-delay: -1.001s;
}

.confetti:nth-child(35) .askew {
  -webkit-animation-duration: 1.72s;
          animation-duration: 1.72s;
  -webkit-animation-delay: -1.0492s;
          animation-delay: -1.0492s;
}

.confetti:nth-child(35) .rotate {
  -webkit-animation-duration: 1.05s;
          animation-duration: 1.05s;
  -webkit-animation-delay: -0.7245s;
          animation-delay: -0.7245s;
}

.confetti:nth-child(36) .askew {
  -webkit-animation-duration: 1.32s;
          animation-duration: 1.32s;
  -webkit-animation-delay: -0.9636s;
          animation-delay: -0.9636s;
}

.confetti:nth-child(36) .rotate {
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  -webkit-animation-delay: -1.105s;
          animation-delay: -1.105s;
}

.confetti:nth-child(37) .askew {
  -webkit-animation-duration: 1.61s;
          animation-duration: 1.61s;
  -webkit-animation-delay: -1.0626s;
          animation-delay: -1.0626s;
}

.confetti:nth-child(37) .rotate {
  -webkit-animation-duration: 1.59s;
          animation-duration: 1.59s;
  -webkit-animation-delay: -0.1749s;
          animation-delay: -0.1749s;
}

.confetti:nth-child(38) .askew {
  -webkit-animation-duration: 1.28s;
          animation-duration: 1.28s;
  -webkit-animation-delay: -0.4352s;
          animation-delay: -0.4352s;
}

.confetti:nth-child(38) .rotate {
  -webkit-animation-duration: 1.82s;
          animation-duration: 1.82s;
  -webkit-animation-delay: -0.7826s;
          animation-delay: -0.7826s;
}

.confetti:nth-child(39) .askew {
  -webkit-animation-duration: 1.44s;
          animation-duration: 1.44s;
  -webkit-animation-delay: -0.72s;
          animation-delay: -0.72s;
}

.confetti:nth-child(39) .rotate {
  -webkit-animation-duration: 1.73s;
          animation-duration: 1.73s;
  -webkit-animation-delay: -0.4498s;
          animation-delay: -0.4498s;
}

.confetti:nth-child(40) .askew {
  -webkit-animation-duration: 1.77s;
          animation-duration: 1.77s;
  -webkit-animation-delay: -0.2832s;
          animation-delay: -0.2832s;
}

.confetti:nth-child(40) .rotate {
  -webkit-animation-duration: 1.26s;
          animation-duration: 1.26s;
  -webkit-animation-delay: -1.1214s;
          animation-delay: -1.1214s;
}

.confetti:nth-child(41) .askew {
  -webkit-animation-duration: 1.04s;
          animation-duration: 1.04s;
  -webkit-animation-delay: -0.5824s;
          animation-delay: -0.5824s;
}

.confetti:nth-child(41) .rotate {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
  -webkit-animation-delay: -0.432s;
          animation-delay: -0.432s;
}

.confetti:nth-child(42) .askew {
  -webkit-animation-duration: 1.05s;
          animation-duration: 1.05s;
  -webkit-animation-delay: -0.1365s;
          animation-delay: -0.1365s;
}

.confetti:nth-child(42) .rotate {
  -webkit-animation-duration: 1.04s;
          animation-duration: 1.04s;
  -webkit-animation-delay: -0.8528s;
          animation-delay: -0.8528s;
}

.confetti:nth-child(43) .askew {
  -webkit-animation-duration: 1.17s;
          animation-duration: 1.17s;
  -webkit-animation-delay: -0.819s;
          animation-delay: -0.819s;
}

.confetti:nth-child(43) .rotate {
  -webkit-animation-duration: 1.62s;
          animation-duration: 1.62s;
  -webkit-animation-delay: -0.7938s;
          animation-delay: -0.7938s;
}

.confetti:nth-child(44) .askew {
  -webkit-animation-duration: 1.54s;
          animation-duration: 1.54s;
  -webkit-animation-delay: -0.1848s;
          animation-delay: -0.1848s;
}

.confetti:nth-child(44) .rotate {
  -webkit-animation-duration: 1.67s;
          animation-duration: 1.67s;
  -webkit-animation-delay: -0.9519s;
          animation-delay: -0.9519s;
}

.confetti:nth-child(45) .askew {
  -webkit-animation-duration: 1.63s;
          animation-duration: 1.63s;
  -webkit-animation-delay: -0.4075s;
          animation-delay: -0.4075s;
}

.confetti:nth-child(45) .rotate {
  -webkit-animation-duration: 1.67s;
          animation-duration: 1.67s;
  -webkit-animation-delay: -0.9853s;
          animation-delay: -0.9853s;
}

.confetti:nth-child(46) .askew {
  -webkit-animation-duration: 1.49s;
          animation-duration: 1.49s;
  -webkit-animation-delay: -0.6556s;
          animation-delay: -0.6556s;
}

.confetti:nth-child(46) .rotate {
  -webkit-animation-duration: 1.7s;
          animation-duration: 1.7s;
  -webkit-animation-delay: -1.02s;
          animation-delay: -1.02s;
}

.confetti:nth-child(47) .askew {
  -webkit-animation-duration: 1.61s;
          animation-duration: 1.61s;
  -webkit-animation-delay: -0.5152s;
          animation-delay: -0.5152s;
}

.confetti:nth-child(47) .rotate {
  -webkit-animation-duration: 1.39s;
          animation-duration: 1.39s;
  -webkit-animation-delay: -0.2502s;
          animation-delay: -0.2502s;
}

.confetti:nth-child(48) .askew {
  -webkit-animation-duration: 1.23s;
          animation-duration: 1.23s;
  -webkit-animation-delay: -0.0738s;
          animation-delay: -0.0738s;
}

.confetti:nth-child(48) .rotate {
  -webkit-animation-duration: 1.36s;
          animation-duration: 1.36s;
  -webkit-animation-delay: -1.1424s;
          animation-delay: -1.1424s;
}

.confetti:nth-child(49) .askew {
  -webkit-animation-duration: 1.21s;
          animation-duration: 1.21s;
  -webkit-animation-delay: -0.9438s;
          animation-delay: -0.9438s;
}

.confetti:nth-child(49) .rotate {
  -webkit-animation-duration: 1.71s;
          animation-duration: 1.71s;
  -webkit-animation-delay: -1.6758s;
          animation-delay: -1.6758s;
}

.confetti:nth-child(50) .askew {
  -webkit-animation-duration: 1.76s;
          animation-duration: 1.76s;
  -webkit-animation-delay: -1.0912s;
          animation-delay: -1.0912s;
}

.confetti:nth-child(50) .rotate {
  -webkit-animation-duration: 1.79s;
          animation-duration: 1.79s;
  -webkit-animation-delay: -0.8592s;
          animation-delay: -0.8592s;
}

.confetti:nth-child(51) .askew {
  -webkit-animation-duration: 1.98s;
          animation-duration: 1.98s;
  -webkit-animation-delay: -1.3266s;
          animation-delay: -1.3266s;
}

.confetti:nth-child(51) .rotate {
  -webkit-animation-duration: 1.25s;
          animation-duration: 1.25s;
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}

.confetti:nth-child(52) .askew {
  -webkit-animation-duration: 1.87s;
          animation-duration: 1.87s;
  -webkit-animation-delay: -0.2992s;
          animation-delay: -0.2992s;
}

.confetti:nth-child(52) .rotate {
  -webkit-animation-duration: 1.41s;
          animation-duration: 1.41s;
  -webkit-animation-delay: -0.3525s;
          animation-delay: -0.3525s;
}

.confetti:nth-child(53) .askew {
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
  -webkit-animation-delay: -0.935s;
          animation-delay: -0.935s;
}

.confetti:nth-child(53) .rotate {
  -webkit-animation-duration: 1.13s;
          animation-duration: 1.13s;
  -webkit-animation-delay: -0.5537s;
          animation-delay: -0.5537s;
}

.confetti:nth-child(54) .askew {
  -webkit-animation-duration: 1.83s;
          animation-duration: 1.83s;
  -webkit-animation-delay: -0.1281s;
          animation-delay: -0.1281s;
}

.confetti:nth-child(54) .rotate {
  -webkit-animation-duration: 1.53s;
          animation-duration: 1.53s;
  -webkit-animation-delay: -1.3311s;
          animation-delay: -1.3311s;
}

.confetti:nth-child(55) .askew {
  -webkit-animation-duration: 1.27s;
          animation-duration: 1.27s;
  -webkit-animation-delay: -0.381s;
          animation-delay: -0.381s;
}

.confetti:nth-child(55) .rotate {
  -webkit-animation-duration: 1.14s;
          animation-duration: 1.14s;
  -webkit-animation-delay: -0.3762s;
          animation-delay: -0.3762s;
}

.confetti:nth-child(56) .askew {
  -webkit-animation-duration: 1.29s;
          animation-duration: 1.29s;
  -webkit-animation-delay: -0.5418s;
          animation-delay: -0.5418s;
}

.confetti:nth-child(56) .rotate {
  -webkit-animation-duration: 1.31s;
          animation-duration: 1.31s;
  -webkit-animation-delay: -0.917s;
          animation-delay: -0.917s;
}

.confetti:nth-child(57) .askew {
  -webkit-animation-duration: 1.59s;
          animation-duration: 1.59s;
  -webkit-animation-delay: -1.2402s;
          animation-delay: -1.2402s;
}

.confetti:nth-child(57) .rotate {
  -webkit-animation-duration: 1.76s;
          animation-duration: 1.76s;
  -webkit-animation-delay: -1.2848s;
          animation-delay: -1.2848s;
}

.confetti:nth-child(58) .askew {
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  -webkit-animation-delay: -0.728s;
          animation-delay: -0.728s;
}

.confetti:nth-child(58) .rotate {
  -webkit-animation-duration: 1.43s;
          animation-duration: 1.43s;
  -webkit-animation-delay: -1.3585s;
          animation-delay: -1.3585s;
}

.confetti:nth-child(59) .askew {
  -webkit-animation-duration: 1.63s;
          animation-duration: 1.63s;
  -webkit-animation-delay: -1.5485s;
          animation-delay: -1.5485s;
}

.confetti:nth-child(59) .rotate {
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
  -webkit-animation-delay: -1.386s;
          animation-delay: -1.386s;
}

.confetti:nth-child(60) .askew {
  -webkit-animation-duration: 1.39s;
          animation-duration: 1.39s;
  -webkit-animation-delay: -0.9869s;
          animation-delay: -0.9869s;
}

.confetti:nth-child(60) .rotate {
  -webkit-animation-duration: 1.22s;
          animation-duration: 1.22s;
  -webkit-animation-delay: -0.1952s;
          animation-delay: -0.1952s;
}

.confetti:nth-child(61) .askew {
  -webkit-animation-duration: 1.51s;
          animation-duration: 1.51s;
  -webkit-animation-delay: -0.4832s;
          animation-delay: -0.4832s;
}

.confetti:nth-child(61) .rotate {
  -webkit-animation-duration: 1.63s;
          animation-duration: 1.63s;
  -webkit-animation-delay: -1.0432s;
          animation-delay: -1.0432s;
}

.confetti:nth-child(62) .askew {
  -webkit-animation-duration: 1.78s;
          animation-duration: 1.78s;
  -webkit-animation-delay: -1.7266s;
          animation-delay: -1.7266s;
}

.confetti:nth-child(62) .rotate {
  -webkit-animation-duration: 1.93s;
          animation-duration: 1.93s;
  -webkit-animation-delay: -0.3281s;
          animation-delay: -0.3281s;
}

.confetti:nth-child(63) .askew {
  -webkit-animation-duration: 1.62s;
          animation-duration: 1.62s;
  -webkit-animation-delay: -0.9234s;
          animation-delay: -0.9234s;
}

.confetti:nth-child(63) .rotate {
  -webkit-animation-duration: 1.42s;
          animation-duration: 1.42s;
  -webkit-animation-delay: -0.284s;
          animation-delay: -0.284s;
}

.confetti:nth-child(64) .askew {
  -webkit-animation-duration: 1.83s;
         .........完整代码请登录后点击上方下载按钮下载查看