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