纯css实现粒子落叶飞舞动画效果-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：纯css实现粒子落叶飞舞动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@400&amp;display=swap'>
<style>
body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-perspective: 800px;
          perspective: 800px;
  font-family: 'Baloo Paaji 2', cursive;
}

.title {
  font-size: 6rem;
  color: #fcc;
}

div {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  top: 0;
  left: 0;
}

.camera {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.camera.-y {
  -webkit-animation: cameraY 30s linear infinite;
          animation: cameraY 30s linear infinite;
}
.camera.-x {
  -webkit-transform: rotateX(10deg) translateY(-300px);
          transform: rotateX(10deg) translateY(-300px);
}

.sakura {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
  background: #fcc;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}
.sakura::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fcc;
  border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: slide 8s linear infinite;
          animation: slide 8s linear infinite;
}

.drop {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: drop 4s linear infinite;
          animation: drop 4s linear infinite;
}
.drop:nth-child(1) {
  left: 28%;
  -webkit-animation-delay: -6550ms;
          animation-delay: -6550ms;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.drop:nth-child(1) .slide {
  -webkit-animation-delay: -4918ms;
          animation-delay: -4918ms;
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
}
.drop:nth-child(1) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(1) .rotate {
  -webkit-animation-delay: -9858ms;
          animation-delay: -9858ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(1) .move, .drop:nth-child(1) .reverse {
  -webkit-animation-delay: -8247ms;
          animation-delay: -8247ms;
}
.drop:nth-child(1) .z {
  -webkit-transform: translateZ(642px);
          transform: translateZ(642px);
}
.drop:nth-child(2) {
  left: 59%;
  -webkit-animation-delay: -3351ms;
          animation-delay: -3351ms;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.drop:nth-child(2) .slide {
  -webkit-animation-delay: -6173ms;
          animation-delay: -6173ms;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.drop:nth-child(2) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(2) .rotate {
  -webkit-animation-delay: -7001ms;
          animation-delay: -7001ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(2) .move, .drop:nth-child(2) .reverse {
  -webkit-animation-delay: -9966ms;
          animation-delay: -9966ms;
}
.drop:nth-child(2) .z {
  -webkit-transform: translateZ(198px);
          transform: translateZ(198px);
}
.drop:nth-child(3) {
  left: 39%;
  -webkit-animation-delay: -4290ms;
          animation-delay: -4290ms;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.drop:nth-child(3) .slide {
  -webkit-animation-delay: -9204ms;
          animation-delay: -9204ms;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.drop:nth-child(3) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(3) .rotate {
  -webkit-animation-delay: -4136ms;
          animation-delay: -4136ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(3) .move, .drop:nth-child(3) .reverse {
  -webkit-animation-delay: -8595ms;
          animation-delay: -8595ms;
}
.drop:nth-child(3) .z {
  -webkit-transform: translateZ(713px);
          transform: translateZ(713px);
}
.drop:nth-child(4) {
  left: 50%;
  -webkit-animation-delay: -4555ms;
          animation-delay: -4555ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(4) .slide {
  -webkit-animation-delay: -1820ms;
          animation-delay: -1820ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(4) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(4) .rotate {
  -webkit-animation-delay: -8328ms;
          animation-delay: -8328ms;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.drop:nth-child(4) .move, .drop:nth-child(4) .reverse {
  -webkit-animation-delay: -2245ms;
          animation-delay: -2245ms;
}
.drop:nth-child(4) .z {
  -webkit-transform: translateZ(-3px);
          transform: translateZ(-3px);
}
.drop:nth-child(5) {
  left: 17%;
  -webkit-animation-delay: -3176ms;
          animation-delay: -3176ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(5) .slide {
  -webkit-animation-delay: -6186ms;
          animation-delay: -6186ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(5) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(5) .rotate {
  -webkit-animation-delay: -2094ms;
          animation-delay: -2094ms;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.drop:nth-child(5) .move, .drop:nth-child(5) .reverse {
  -webkit-animation-delay: -2558ms;
          animation-delay: -2558ms;
}
.drop:nth-child(5) .z {
  -webkit-transform: translateZ(-688px);
          transform: translateZ(-688px);
}
.drop:nth-child(6) {
  left: 87%;
  -webkit-animation-delay: -4698ms;
          animation-delay: -4698ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(6) .slide {
  -webkit-animation-delay: -383ms;
          animation-delay: -383ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(6) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(6) .rotate {
  -webkit-animation-delay: -7435ms;
          animation-delay: -7435ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(6) .move, .drop:nth-child(6) .reverse {
  -webkit-animation-delay: -2194ms;
          animation-delay: -2194ms;
}
.drop:nth-child(6) .z {
  -webkit-transform: translateZ(-496px);
          transform: translateZ(-496px);
}
.drop:nth-child(7) {
  left: 73%;
  -webkit-animation-delay: -5747ms;
          animation-delay: -5747ms;
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
}
.drop:nth-child(7) .slide {
  -webkit-animation-delay: -2794ms;
          animation-delay: -2794ms;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.drop:nth-child(7) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(7) .rotate {
  -webkit-animation-delay: -3248ms;
          animation-delay: -3248ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(7) .move, .drop:nth-child(7) .reverse {
  -webkit-animation-delay: -8751ms;
          animation-delay: -8751ms;
}
.drop:nth-child(7) .z {
  -webkit-transform: translateZ(954px);
          transform: translateZ(954px);
}
.drop:nth-child(8) {
  left: 89%;
  -webkit-animation-delay: -312ms;
          animation-delay: -312ms;
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
}
.drop:nth-child(8) .slide {
  -webkit-animation-delay: -6626ms;
          animation-delay: -6626ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(8) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(8) .rotate {
  -webkit-animation-delay: -4156ms;
          animation-delay: -4156ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(8) .move, .drop:nth-child(8) .reverse {
  -webkit-animation-delay: -4577ms;
          animation-delay: -4577ms;
}
.drop:nth-child(8) .z {
  -webkit-transform: translateZ(-389px);
          transform: translateZ(-389px);
}
.drop:nth-child(9) {
  left: 33%;
  -webkit-animation-delay: -8751ms;
          animation-delay: -8751ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(9) .slide {
  -webkit-animation-delay: -3493ms;
          animation-delay: -3493ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(9) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(9) .rotate {
  -webkit-animation-delay: -5107ms;
          animation-delay: -5107ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(9) .move, .drop:nth-child(9) .reverse {
  -webkit-animation-delay: -6013ms;
          animation-delay: -6013ms;
}
.drop:nth-child(9) .z {
  -webkit-transform: translateZ(-566px);
          transform: translateZ(-566px);
}
.drop:nth-child(10) {
  left: 13%;
  -webkit-animation-delay: -6318ms;
          animation-delay: -6318ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(10) .slide {
  -webkit-animation-delay: -1960ms;
          animation-delay: -1960ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(10) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(10) .rotate {
  -webkit-animation-delay: -1972ms;
          animation-delay: -1972ms;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.drop:nth-child(10) .move, .drop:nth-child(10) .reverse {
  -webkit-animation-delay: -3999ms;
          animation-delay: -3999ms;
}
.drop:nth-child(10) .z {
  -webkit-transform: translateZ(-645px);
          transform: translateZ(-645px);
}
.drop:nth-child(11) {
  left: 92%;
  -webkit-animation-delay: -5267ms;
          animation-delay: -5267ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(11) .slide {
  -webkit-animation-delay: -6075ms;
          animation-delay: -6075ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(11) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(11) .rotate {
  -webkit-animation-delay: -126ms;
          animation-delay: -126ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(11) .move, .drop:nth-child(11) .reverse {
  -webkit-animation-delay: -4579ms;
          animation-delay: -4579ms;
}
.drop:nth-child(11) .z {
  -webkit-transform: translateZ(619px);
          transform: translateZ(619px);
}
.drop:nth-child(12) {
  left: 94%;
  -webkit-animation-delay: -182ms;
          animation-delay: -182ms;
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
}
.drop:nth-child(12) .slide {
  -webkit-animation-delay: -4242ms;
          animation-delay: -4242ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(12) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(12) .rotate {
  -webkit-animation-delay: -3234ms;
          animation-delay: -3234ms;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.drop:nth-child(12) .move, .drop:nth-child(12) .reverse {
  -webkit-animation-delay: -7296ms;
          animation-delay: -7296ms;
}
.drop:nth-child(12) .z {
  -webkit-transform: translateZ(759px);
          transform: translateZ(759px);
}
.drop:nth-child(13) {
  left: 41%;
  -webkit-animation-delay: -9502ms;
          animation-delay: -9502ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(13) .slide {
  -webkit-animation-delay: -9009ms;
          animation-delay: -9009ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(13) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(13) .rotate {
  -webkit-animation-delay: -3715ms;
          animation-delay: -3715ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(13) .move, .drop:nth-child(13) .reverse {
  -webkit-animation-delay: -638ms;
          animation-delay: -638ms;
}
.drop:nth-child(13) .z {
  -webkit-transform: translateZ(-670px);
          transform: translateZ(-670px);
}
.drop:nth-child(14) {
  left: 80%;
  -webkit-animation-delay: -9721ms;
          animation-delay: -9721ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(14) .slide {
  -webkit-animation-delay: -2335ms;
          animation-delay: -2335ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(14) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(14) .rotate {
  -webkit-animation-delay: -4525ms;
          animation-delay: -4525ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(14) .move, .drop:nth-child(14) .reverse {
  -webkit-animation-delay: -251ms;
          animation-delay: -251ms;
}
.drop:nth-child(14) .z {
  -webkit-transform: translateZ(917px);
          transform: translateZ(917px);
}
.drop:nth-child(15) {
  left: 34%;
  -webkit-animation-delay: -8995ms;
          animation-delay: -8995ms;
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
}
.drop:nth-child(15) .slide {
  -webkit-animation-delay: -3827ms;
          animation-delay: -3827ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(15) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(15) .rotate {
  -webkit-animation-delay: -5613ms;
          animation-delay: -5613ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(15) .move, .drop:nth-child(15) .reverse {
  -webkit-animation-delay: -7245ms;
          animation-delay: -7245ms;
}
.drop:nth-child(15) .z {
  -webkit-transform: translateZ(-168px);
          transform: translateZ(-168px);
}
.drop:nth-child(16) {
  left: 90%;
  -webkit-animation-delay: -8696ms;
          animation-delay: -8696ms;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.drop:nth-child(16) .slide {
  -webkit-animation-delay: -436ms;
          animation-delay: -436ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(16) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(16) .rotate {
  -webkit-animation-delay: -9657ms;
          animation-delay: -9657ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(16) .move, .drop:nth-child(16) .reverse {
  -webkit-animation-delay: -5957ms;
          animation-delay: -5957ms;
}
.drop:nth-child(16) .z {
  -webkit-transform: translateZ(-731px);
          transform: translateZ(-731px);
}
.drop:nth-child(17) {
  left: 42%;
  -webkit-animation-delay: -3781ms;
          animation-delay: -3781ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(17) .slide {
  -webkit-animation-delay: -375ms;
          animation-delay: -375ms;
  -webkit-animation-duration: 14s;
          animation-duration: 14s;
}
.drop:nth-child(17) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(17) .rotate {
  -webkit-animation-delay: -3044ms;
          animation-delay: -3044ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(17) .move, .drop:nth-child(17) .reverse {
  -webkit-animation-delay: -4764ms;
          animation-delay: -4764ms;
}
.drop:nth-child(17) .z {
  -webkit-transform: translateZ(-708px);
          transform: translateZ(-708px);
}
.drop:nth-child(18) {
  left: 3%;
  -webkit-animation-delay: -8662ms;
          animation-delay: -8662ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(18) .slide {
  -webkit-animation-delay: -7233ms;
          animation-delay: -7233ms;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.drop:nth-child(18) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(18) .rotate {
  -webkit-animation-delay: -5905ms;
          animation-delay: -5905ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(18) .move, .drop:nth-child(18) .reverse {
  -webkit-animation-delay: -8192ms;
          animation-delay: -8192ms;
}
.drop:nth-child(18) .z {
  -webkit-transform: translateZ(813px);
          transform: translateZ(813px);
}
.drop:nth-child(19) {
  left: 77%;
  -webkit-animation-delay: -9854ms;
          animation-delay: -9854ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(19) .slide {
  -webkit-animation-delay: -3086ms;
          animation-delay: -3086ms;
  -webkit-animation-duration: 14s;
          animation-duration: 14s;
}
.drop:nth-child(19) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(19) .rotate {
  -webkit-animation-delay: -3515ms;
          animation-delay: -3515ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(19) .move, .drop:nth-child(19) .reverse {
  -webkit-animation-delay: -9032ms;
          animation-delay: -9032ms;
}
.drop:nth-child(19) .z {
  -webkit-transform: translateZ(-171px);
          transform: translateZ(-171px);
}
.drop:nth-child(20) {
  left: 8%;
  -webkit-animation-delay: -7051ms;
          animation-delay: -7051ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(20) .slide {
  -webkit-animation-delay: -9754ms;
          animation-delay: -9754ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(20) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(20) .rotate {
  -webkit-animation-delay: -9225ms;
          animation-delay: -9225ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(20) .move, .drop:nth-child(20) .reverse {
  -webkit-animation-delay: -2938ms;
          animation-delay: -2938ms;
}
.drop:nth-child(20) .z {
  -webkit-transform: translateZ(-581px);
          transform: translateZ(-581px);
}
.drop:nth-child(21) {
  left: 13%;
  -webkit-animation-delay: -2477ms;
          animation-delay: -2477ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(21) .slide {
  -webkit-animation-delay: -4468ms;
          animation-delay: -4468ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(21) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(21) .rotate {
  -webkit-animation-delay: -1957ms;
          animation-delay: -1957ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(21) .move, .drop:nth-child(21) .reverse {
  -webkit-animation-delay: -8980ms;
          animation-delay: -8980ms;
}
.drop:nth-child(21) .z {
  -webkit-transform: translateZ(-454px);
          transform: translateZ(-454px);
}
.drop:nth-child(22) {
  left: 94%;
  -webkit-animation-delay: -8789ms;
          animation-delay: -8789ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(22) .slide {
  -webkit-animation-delay: -3705ms;
          animation-delay: -3705ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(22) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(22) .rotate {
  -webkit-animation-delay: -4119ms;
          animation-delay: -4119ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(22) .move, .drop:nth-child(22) .reverse {
  -webkit-animation-delay: -5322ms;
          animation-delay: -5322ms;
}
.drop:nth-child(22) .z {
  -webkit-transform: translateZ(575px);
          transform: translateZ(575px);
}
.drop:nth-child(23) {
  left: 21%;
  -webkit-animation-delay: -8001ms;
          animation-delay: -8001ms;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.drop:nth-child(23) .slide {
  -webkit-animation-delay: -3228ms;
          animation-delay: -3228ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(23) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(23) .rotate {
  -webkit-animation-delay: -9951ms;
          animation-delay: -9951ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(23) .move, .drop:nth-child(23) .reverse {
  -webkit-animation-delay: -302ms;
          animation-delay: -302ms;
}
.drop:nth-child(23) .z {
  -webkit-transform: translateZ(119px);
          transform: translateZ(119px);
}
.drop:nth-child(24) {
  left: 55%;
  -webkit-animation-delay: -1775ms;
          animation-delay: -1775ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(24) .slide {
  -webkit-animation-delay: -8917ms;
          animation-delay: -8917ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(24) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(24) .rotate {
  -webkit-animation-delay: -6533ms;
          animation-delay: -6533ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(24) .move, .drop:nth-child(24) .reverse {
  -webkit-animation-delay: -8042ms;
          animation-delay: -8042ms;
}
.drop:nth-child(24) .z {
  -webkit-transform: translateZ(-228px);
          transform: translateZ(-228px);
}
.drop:nth-child(25) {
  left: 66%;
  -webkit-animation-delay: -6276ms;
          animation-delay: -6276ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(25) .slide {
  -webkit-animation-delay: -1530ms;
          animation-delay: -1530ms;
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
}
.drop:nth-child(25) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(25) .rotate {
  -webkit-animation-delay: -3948ms;
          animation-delay: -3948ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(25) .move, .drop:nth-child(25) .reverse {
  -webkit-animation-delay: -9650ms;
          animation-delay: -9650ms;
}
.drop:nth-child(25) .z {
  -webkit-transform: translateZ(-65px);
          transform: translateZ(-65px);
}
.drop:nth-child(26) {
  left: 76%;
  -webkit-animation-delay: -1383ms;
          animation-delay: -1383ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(26) .slide {
  -webkit-animation-delay: -2101ms;
          animation-delay: -2101ms;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.drop:nth-child(26) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(26) .rotate {
  -webkit-animation-delay: -5298ms;
          animation-delay: -5298ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(26) .move, .drop:nth-child(26) .reverse {
  -webkit-animation-delay: -5298ms;
          animation-delay: -5298ms;
}
.drop:nth-child(26) .z {
  -webkit-transform: translateZ(-178px);
          transform: translateZ(-178px);
}
.drop:nth-child(27) {
  left: 44%;
  -webkit-animation-delay: -1687ms;
          animation-delay: -1687ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(27) .slide {
  -webkit-animation-delay: -3620ms;
          animation-delay: -3620ms;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.drop:nth-child(27) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(27) .rotate {
  -webkit-animation-delay: -2519ms;
          animation-delay: -2519ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(27) .move, .drop:nth-child(27) .reverse {
  -webkit-animation-delay: -4104ms;
          animation-delay: -4104ms;
}
.drop:nth-child(27) .z {
  -webkit-transform: translateZ(-389px);
          transform: translateZ(-389px);
}
.drop:nth-child(28) {
  left: 90%;
  -webkit-animation-delay: -2822ms;
          animation-delay: -2822ms;
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
}
.drop:nth-child(28) .slide {
  -webkit-animation-delay: -1424ms;
          animation-delay: -1424ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(28) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(28) .rotate {
  -webkit-animation-delay: -7820ms;
          animation-delay: -7820ms;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.drop:nth-child(28) .move, .drop:nth-child(28) .reverse {
  -webkit-animation-delay: -196ms;
          animation-delay: -196ms;
}
.drop:nth-child(28) .z {
  -webkit-transform: translateZ(-523px);
          transform: translateZ(-523px);
}
.drop:nth-child(29) {
  left: 49%;
  -webkit-animation-delay: -7441ms;
          animation-delay: -7441ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(29) .slide {
  -webkit-animation-delay: -5958ms;
          animation-delay: -5958ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(29) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(29) .rotate {
  -webkit-animation-delay: -6182ms;
          animation-delay: -6182ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(29) .move, .drop:nth-child(29) .reverse {
  -webkit-animation-delay: -5529ms;
          animation-delay: -5529ms;
}
.drop:nth-child(29) .z {
  -webkit-transform: translateZ(533px);
          transform: translateZ(533px);
}
.drop:nth-child(30) {
  left: 96%;
  -webkit-animation-delay: -5609ms;
          animation-delay: -5609ms;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.drop:nth-child(30) .slide {
  -webkit-animation-delay: -116ms;
          animation-delay: -116ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(30) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(30) .rotate {
  -webkit-animation-delay: -739ms;
          animation-delay: -739ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(30) .move, .drop:nth-child(30) .reverse {
  -webkit-animation-delay: -1384ms;
          animation-delay: -1384ms;
}
.drop:nth-child(30) .z {
  -webkit-transform: translateZ(351px);
          transform: translateZ(351px);
}
.drop:nth-child(31) {
  left: 23%;
  -webkit-animation-delay: -4251ms;
          animation-delay: -4251ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(31) .slide {
  -webkit-animation-delay: -7423ms;
          animation-delay: -7423ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(31) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(31) .rotate {
  -webkit-animation-delay: -380ms;
          animation-delay: -380ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(31) .move, .drop:nth-child(31) .reverse {
  -webkit-animation-delay: -3181ms;
          animation-delay: -3181ms;
}
.drop:nth-child(31) .z {
  -webkit-transform: translateZ(-996px);
          transform: translateZ(-996px);
}
.drop:nth-child(32) {
  left: 57%;
  -webkit-animation-delay: -4146ms;
          animation-delay: -4146ms;
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
}
.drop:nth-child(32) .slide {
  -webkit-animation-delay: -5673ms;
          animation-delay: -5673ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(32) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(32) .rotate {
  -webkit-animation-delay: -3794ms;
          animation-delay: -3794ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(32) .move, .drop:nth-child(32) .reverse {
  -webkit-animation-delay: -7736ms;
          animation-delay: -7736ms;
}
.drop:nth-child(32) .z {
  -webkit-transform: translateZ(448px);
          transform: translateZ(448px);
}
.drop:nth-child(33) {
  left: 14%;
  -webkit-animation-delay: -5144ms;
          animation-delay: -5144ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(33) .slide {
  -webkit-animation-delay: -8630ms;
          animation-delay: -8630ms;
  -webkit-animation-duration: 14s;
          animation-duration: 14s;
}
.drop:nth-child(33) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(33) .rotate {
  -webkit-animation-delay: -7047ms;
          animation-delay: -7047ms;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.drop:nth-child(33) .move, .drop:nth-child(33) .reverse {
  -webkit-animation-delay: -7413ms;
          animation-delay: -7413ms;
}
.drop:nth-child(33) .z {
  -webkit-transform: translateZ(-259px);
          transform: translateZ(-259px);
}
.drop:nth-child(34) {
  left: 83%;
  -webkit-animation-delay: -6653ms;
          animation-delay: -6653ms;
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
}
.drop:nth-child(34) .slide {
  -webkit-animation-delay: -7056ms;
          animation-delay: -7056ms;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.drop:nth-child(34) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(34) .rotate {
  -webkit-animation-delay: -2847ms;
          animation-delay: -2847ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(34) .move, .drop:nth-child(34) .reverse {
  -webkit-animation-delay: -1437ms;
          animation-delay: -1437ms;
}
.drop:nth-child(34) .z {
  -webkit-transform: translateZ(807px);
          transform: translateZ(807px);
}
.drop:nth-child(35) {
  left: 22%;
  -webkit-animation-delay: -1872ms;
          animation-delay: -1872ms;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.drop:nth-child(35) .slide {
  -webkit-animation-delay: -290ms;
          animation-delay: -290ms;
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
}
.drop:nth-child(35) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(35) .rotate {
  -webkit-animation-delay: -2324ms;
          animation-delay: -2324ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(35) .move, .drop:nth-child(35) .reverse {
  -webkit-animation-delay: -1155ms;
          animation-delay: -1155ms;
}
.drop:nth-child(35) .z {
  -webkit-transform: translateZ(223px);
          transform: translateZ(223px);
}
.drop:nth-child(36) {
  left: 47%;
  -webkit-animation-delay: -2025ms;
          animation-delay: -2025ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(36) .slide {
  -webkit-animation-delay: -8249ms;
          animation-delay: -8249ms;
  -webkit-animation-duration: 14s;
          animation-duration: 14s;
}
.drop:nth-child(36) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(36) .rotate {
  -webkit-animation-delay: -2301ms;
          animation-delay: -2301ms;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.drop:nth-child(36) .move, .drop:nth-child(36) .reverse {
  -webkit-animation-delay: -6696ms;
          animation-delay: -6696ms;
}
.drop:nth-child(36) .z {
  -webkit-transform: translateZ(234px);
          transform: translateZ(234px);
}
.drop:nth-child(37) {
  left: 30%;
  -webkit-animation-delay: -9253ms;
          animation-delay: -9253ms;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.drop:nth-child(37) .slide {
  -webkit-animation-delay: -6039ms;
          animation-delay: -6039ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(37) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(37) .rotate {
  -webkit-animation-delay: -1437ms;
          animation-delay: -1437ms;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.drop:nth-child(37) .move, .drop:nth-child(37) .reverse {
  -webkit-animation-delay: -1176ms;
          animation-delay: -1176ms;
}
.drop:nth-child(37) .z {
  -webkit-transform: translateZ(-259px);
          transform: translateZ(-259px);
}
.drop:nth-child(38) {
  left: 77%;
  -webkit-animation-delay: -1623ms;
          animation-delay: -1623ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(38) .slide {
  -webkit-animation-delay: -6489ms;
          animation-delay: -6489ms;
  -webkit-animation-duration: 14s;
          animation-duration: 14s;
}
.drop:nth-child(38) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(38) .rotate {
  -webkit-animation-delay: -2399ms;
          animation-delay: -2399ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(38) .move, .drop:nth-child(38) .reverse {
  -webkit-animation-delay: -985ms;
          animation-delay: -985ms;
}
.drop:nth-child(38) .z {
  -webkit-transform: translateZ(147px);
          transform: translateZ(147px);
}
.drop:nth-child(39) {
  left: 42%;
  -webkit-animation-delay: -3629ms;
          animation-delay: -3629ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(39) .slide {
  -webkit-animation-delay: -7797ms;
          animation-delay: -7797ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(39) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(39) .rotate {
  -webkit-animation-delay: -8917ms;
          animation-delay: -8917ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(39) .move, .drop:nth-child(39) .reverse {
  -webkit-animation-delay: -8215ms;
          animation-delay: -8215ms;
}
.drop:nth-child(39) .z {
  -webkit-transform: translateZ(759px);
          transform: translateZ(759px);
}
.drop:nth-child(40) {
  left: 17%;
  -webkit-animation-delay: -3224ms;
          animation-delay: -3224ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(40) .slide {
  -webkit-animation-delay: -3539ms;
          animation-delay: -3539ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(40) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(40) .rotate {
  -webkit-animation-delay: -4585ms;
          animation-delay: -4585ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(40) .move, .drop:nth-child(40) .reverse {
  -webkit-animation-delay: -9187ms;
          animation-delay: -9187ms;
}
.drop:nth-child(40) .z {
  -webkit-transform: translateZ(-436px);
          transform: translateZ(-436px);
}
.drop:nth-child(41) {
  left: 99%;
  -webkit-animation-delay: -3014ms;
          animation-delay: -3014ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(41) .slide {
  -webkit-animation-delay: -4669ms;
          animation-delay: -4669ms;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.drop:nth-child(41) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(41) .rotate {
  -webkit-animation-delay: -7322ms;
          animation-delay: -7322ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(41) .move, .drop:nth-child(41) .reverse {
  -webkit-animation-delay: -2132ms;
          animation-delay: -2132ms;
}
.drop:nth-child(41) .z {
  -webkit-transform: translateZ(-347px);
          transform: translateZ(-347px);
}
.drop:nth-child(42) {
  left: 35%;
  -webkit-animation-delay: -2436ms;
          animation-delay: -2436ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(42) .slide {
  -webkit-animation-delay: -299ms;
          animation-delay: -299ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(42) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(42) .rotate {
  -webkit-animation-delay: -1711ms;
          animation-delay: -1711ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(42) .move, .drop:nth-child(42) .reverse {
  -webkit-animation-delay: -7076ms;
          animation-delay: -7076ms;
}
.drop:nth-child(42) .z {
  -webkit-transform: translateZ(-994px);
          transform: translateZ(-994px);
}
.drop:nth-child(43) {
  left: 32%;
  -webkit-animation-delay: -2674ms;
          animation-delay: -2674ms;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.drop:nth-child(43) .slide {
  -webkit-animation-delay: -9483ms;
          animation-delay: -9483ms;
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
}
.drop:nth-child(43) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(43) .rotate {
  -webkit-animation-delay: -2986ms;
          animation-delay: -2986ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(43) .move, .drop:nth-child(43) .reverse {
  -webkit-animation-delay: -8391ms;
          animation-delay: -8391ms;
}
.drop:nth-child(43) .z {
  -webkit-transform: translateZ(-84px);
          transform: translateZ(-84px);
}
.drop:nth-child(44) {
  left: 42%;
  -webkit-animation-delay: -3350ms;
          animation-delay: -3350ms;
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
}
.drop:nth-child(44) .slide {
  -webkit-animation-delay: -7771ms;
          animation-delay: -7771ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(44) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(44) .rotate {
  -webkit-animation-delay: -3278ms;
          animation-delay: -3278ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(44) .move, .drop:nth-child(44) .reverse {
  -webkit-animation-delay: -241ms;
          animation-delay: -241ms;
}
.drop:nth-child(44) .z {
  -webkit-transform: translateZ(434px);
          transform: translateZ(434px);
}
.drop:nth-child(45) {
  left: 88%;
  -webkit-animation-delay: -7753ms;
          animation-delay: -7753ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(45) .slide {
  -webkit-animation-delay: -7175ms;
          animation-delay: -7175ms;
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
}
.drop:nth-child(45) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(45) .rotate {
  -webkit-animation-delay: -5306ms;
          animation-delay: -5306ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(45) .move, .drop:nth-child(45) .reverse {
  -webkit-animation-delay: -6247ms;
          animation-delay: -6247ms;
}
.drop:nth-child(45) .z {
  -webkit-transform: translateZ(243px);
          transform: translateZ(243px);
}
.drop:nth-child(46) {
  left: 17%;
  -webkit-animation-delay: -7078ms;
          animation-delay: -7078ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(46) .slide {
  -webkit-animation-delay: -7169ms;
          animation-delay: -7169ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(46) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(46) .rotate {
  -webkit-animation-delay: -9460ms;
          animation-delay: -9460ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(46) .move, .drop:nth-child(46) .reverse {
  -webkit-animation-delay: -3509ms;
          animation-delay: -3509ms;
}
.drop:nth-child(46) .z {
  -webkit-transform: translateZ(173px);
          transform: translateZ(173px);
}
.drop:nth-child(47) {
  left: 8%;
  -webkit-animation-delay: -8229ms;
          animation-delay: -8229ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(47) .slide {
  -webkit-animation-delay: -5459ms;
          animation-delay: -5459ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(47) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(47) .rotate {
  -webkit-animation-delay: -4097ms;
          animation-delay: -4097ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(47) .move, .drop:nth-child(47) .reverse {
  -webkit-animation-delay: -6200ms;
          animation-delay: -6200ms;
}
.drop:nth-child(47) .z {
  -webkit-transform: translateZ(-996px);
          transform: translateZ(-996px);
}
.drop:nth-child(48) {
  left: 2%;
  -webkit-animation-delay: -5282ms;
          animation-delay: -5282ms;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.drop:nth-child(48) .slide {
  -webkit-animation-delay: -2066ms;
          animation-delay: -2066ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(48) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(48) .rotate {
  -webkit-animation-delay: -1016ms;
          animation-delay: -1016ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(48) .move, .drop:nth-child(48) .reverse {
  -webkit-animation-delay: -9237ms;
          animation-delay: -9237ms;
}
.drop:nth-child(48) .z {
  -webkit-transform: translateZ(-837px);
          transform: translateZ(-837px);
}
.drop:nth-child(49) {
  left: 18%;
  -webkit-animation-delay: -1818ms;
          animation-delay: -1818ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(49) .slide {
  -webkit-animation-delay: -3050ms;
          animation-delay: -3050ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(49) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(49) .rotate {
  -webkit-animation-delay: -4430ms;
          animation-delay: -4430ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(49) .move, .drop:nth-child(49) .reverse {
  -webkit-animation-delay: -447ms;
          animation-delay: -447ms;
}
.drop:nth-child(49) .z {
  -webkit-transform: translateZ(-222px);
          transform: translateZ(-222px);
}
.drop:nth-child(50) {
  left: 56%;
  -webkit-animation-delay: -21ms;
          animation-delay: -21ms;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.drop:nth-child(50) .slide {
  -webkit-animation-delay: -911ms;
          animation-delay: -911ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(50) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(50) .rotate {
  -webkit-animation-delay: -7036ms;
          animation-delay: -7036ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(50) .move, .drop:nth-child(50) .reverse {
  -webkit-animation-delay: -5136ms;
          animation-delay: -5136ms;
}
.drop:nth-child(50) .z {
  -webkit-transform: translateZ(-263px);
          transform: translateZ(-263px);
}
.drop:nth-child(51) {
  left: 96%;
  -webkit-animation-delay: -5282ms;
          animation-delay: -5282ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(51) .slide {
  -webkit-animation-delay: -6203ms;
          animation-delay: -6203ms;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.drop:nth-child(51) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(51) .rotate {
  -webkit-animation-delay: -8740ms;
          animation-delay: -8740ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(51) .move, .drop:nth-child(51) .reverse {
  -webkit-animation-delay: -1056ms;
          animation-delay: -1056ms;
}
.drop:nth-child(51) .z {
  -webkit-transform: translateZ(-134px);
          transform: translateZ(-134px);
}
.drop:nth-child(52) {
  left: 32%;
  -webkit-animation-delay: -1941ms;
          animation-delay: -1941ms;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.drop:nth-child(52) .slide {
  -webkit-animation-delay: -9105ms;
          animation-delay: -9105ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(52) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(52) .rotate {
  -webkit-animation-delay: -6551ms;
          animation-delay: -6551ms;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.drop:nth-child(52) .move, .drop:nth-child(52) .reverse {
  -webkit-animation-delay: -8886ms;
          animation-delay: -8886ms;
}
.drop:nth-child(52) .z {
  -webkit-transform: translateZ(-814px);
          transform: translateZ(-814px);
}
.drop:nth-child(53) {
  left: 84%;
  -webkit-animation-delay: -2358ms;
          animation-delay: -2358ms;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.drop:nth-child(53) .slide {
  -webkit-animation-delay: -8982ms;
          animation-delay: -8982ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(53) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(53) .rotate {
  -webkit-animation-delay: -248ms;
          animation-delay: -248ms;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.drop:nth-child(53) .move, .drop:nth-child(53) .reverse {
  -webkit-animation-delay: -406ms;
          animation-delay: -406ms;
}
.drop:nth-child(53) .z {
  -webkit-transform: translateZ(-673px);
          transform: translateZ(-673px);
}
.drop:nth-child(54) {
  left: 72%;
  -webkit-animation-delay: -8152ms;
          animation-delay: -8152ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(54) .slide {
  -webkit-animation-delay: -7904ms;
          animation-delay: -7904ms;
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
}
.drop:nth-child(54) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(54) .rotate {
  -webkit-animation-delay: -2491ms;
          animation-delay: -2491ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(54) .move, .drop:nth-child(54) .reverse {
  -webkit-animation-delay: -6325ms;
          animation-delay: -6325ms;
}
.drop:nth-child(54) .z {
  -webkit-transform: translateZ(135px);
          transform: translateZ(135px);
}
.drop:nth-child(55) {
  left: 60%;
  -webkit-animation-delay: -9389ms;
          animation-delay: -9389ms;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.drop:nth-child(55) .slide {
  -webkit-animation-delay: -8309ms;
          animation-delay: -8309ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(55) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(55) .rotate {
  -webkit-animation-delay: -6112ms;
          animation-delay: -6112ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(55) .move, .drop:nth-child(55) .reverse {
  -webkit-animation-delay: -5731ms;
          animation-delay: -5731ms;
}
.drop:nth-child(55) .z {
  -webkit-transform: translateZ(-734px);
          transform: translateZ(-734px);
}
.drop:nth-child(56) {
  left: 54%;
  -webkit-animation-delay: -3496ms;
          animation-delay: -3496ms;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.drop:nth-child(56) .slide {
  -webkit-animation-delay: -7504ms;
          animation-delay: -7504ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(56) .size {
  -webkit-transform: scale(3);
          transform: scale(3);
}
.drop:nth-child(56) .rotate {
  -webkit-animation-delay: -8560ms;
          animation-delay: -8560ms;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.drop:nth-child(56) .move, .drop:nth-child(56) .reverse {
  -webkit-animation-delay: -9758ms;
          animation-delay: -9758ms;
}
.drop:nth-child(56) .z {
  -webkit-transform: translateZ(558px);
          transform: translateZ(558px);
}
.drop:nth-child(57) {
  left: 98%;
  -webkit-animation-delay: -8557ms;
          animation-delay: -8557ms;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.drop:nth-child(57) .slide {
  -webkit-animation-delay: -2470ms;
          animation-delay: -2470ms;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.drop:nth-child(57) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(57) .rotate {
  -webkit-animation-delay: -8609ms;
          animation-delay: -8609ms;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.drop:nth-child(57) .move, .drop:nth-child(57) .reverse {
  -webkit-animation-delay: -6566ms;
          animation-delay: -6566ms;
}
.drop:nth-child(57) .z {
  -webkit-transform: translateZ(-700px);
          transform: translateZ(-700px);
}
.drop:nth-child(58) {
  left: 67%;
  -webkit-animation-delay: -2075ms;
          animation-delay: -2075ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(58) .slide {
  -webkit-animation-delay: -496ms;
          animation-delay: -496ms;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.drop:nth-child(58) .size {
  -webkit-transform: scale(2);
          transform: scale(2);
}
.drop:nth-child(58) .rotate {
  -webkit-animation-delay: -9627ms;
          animation-delay: -9627ms;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.drop:nth-child(58) .m.........完整代码请登录后点击上方下载按钮下载查看