纯css实现烟雾动画效果-html代码-BFW代码库

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

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

<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Permanent+Marker&amp;display=swap'>
<style>
body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  font-family: 'Permanent Marker', cursive;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-perspective: 600px;
          perspective: 600px;
}

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

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 3rem;
  mix-blend-mode: difference;
  color: #f5c864;
}
.title::before {
  content: 'smokey';
  position: absolute;
}

.camera.-y {
  -webkit-animation: rotateY 10s linear infinite;
          animation: rotateY 10s linear infinite;
}

.box {
  position: relative;
  width: 250px;
  height: 450px;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
}

.shooting {
  position: absolute;
  width: 5px;
  height: 50%;
  -webkit-animation: shoot 9s linear infinite;
          animation: shoot 9s linear infinite;
}

.graphic {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background: #fff;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(140, 150, 200, 0)), to(#28e6fa));
  background: linear-gradient(0deg, rgba(140, 150, 200, 0), #28e6fa);
  -webkit-filter: blur(10px) contrast(99);
          filter: blur(10px) contrast(99);
}

.depth {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.depth:nth-child(1) {
  -webkit-transform: rotateY(150deg) translateZ(-97px);
          transform: rotateY(150deg) translateZ(-97px);
}
.depth:nth-child(1) .shooting {
  left: 32%;
  -webkit-animation-delay: -8361ms;
          animation-delay: -8361ms;
}
.depth:nth-child(2) {
  -webkit-transform: rotateY(268deg) translateZ(16px);
          transform: rotateY(268deg) translateZ(16px);
}
.depth:nth-child(2) .shooting {
  left: 65%;
  -webkit-animation-delay: -4069ms;
          animation-delay: -4069ms;
}
.depth:nth-child(3) {
  -webkit-transform: rotateY(275deg) translateZ(-65px);
          transform: rotateY(275deg) translateZ(-65px);
}
.depth:nth-child(3) .shooting {
  left: 43%;
  -webkit-animation-delay: -8541ms;
          animation-delay: -8541ms;
}
.depth:nth-child(4) {
  -webkit-transform: rotateY(12deg) translateZ(-54px);
          transform: rotateY(12deg) translateZ(-54px);
}
.depth:nth-child(4) .shooting {
  left: 46%;
  -webkit-animation-delay: -2950ms;
          animation-delay: -2950ms;
}
.depth:nth-child(5) {
  -webkit-transform: rotateY(357deg) translateZ(41px);
          transform: rotateY(357deg) translateZ(41px);
}
.depth:nth-child(5) .shooting {
  left: 34%;
  -webkit-animation-delay: -2819ms;
          animation-delay: -2819ms;
}
.depth:nth-child(6) {
  -webkit-transform: rotateY(97deg) translateZ(-82px);
          transform: rotateY(97deg) translateZ(-82px);
}
.depth:nth-child(6) .shooting {
  left: 60%;
  -webkit-animation-delay: -6343ms;
          animation-delay: -6343ms;
}
.depth:nth-child(7) {
  -webkit-transform: rotateY(318deg) translateZ(-89px);
          transform: rotateY(318deg) translateZ(-89px);
}
.depth:nth-child(7) .shooting {
  left: 67%;
  -webkit-animation-delay: -9946ms;
          animation-delay: -9946ms;
}
.depth:nth-child(8) {
  -webkit-transform: rotateY(328deg) translateZ(48px);
          transform: rotateY(328deg) translateZ(48px);
}
.depth:nth-child(8) .shooting {
  left: 66%;
  -webkit-animation-delay: -3306ms;
          animation-delay: -3306ms;
}
.depth:nth-child(9) {
  -webkit-transform: rotateY(129deg) translateZ(36px);
          transform: rotateY(129deg) translateZ(36px);
}
.depth:nth-child(9) .shooting {
  left: 59%;
  -webkit-animation-delay: -5646ms;
          animation-delay: -5646ms;
}
.depth:nth-child(10) {
  -webkit-transform: rotateY(175deg) translateZ(62px);
          transform: rotateY(175deg) translateZ(62px);
}
.depth:nth-child(10) .shooting {
  left: 33%;
  -webkit-animation-delay: -3879ms;
          animation-delay: -3879ms;
}
.depth:nth-child(11) {
  -webkit-transform: rotateY(117deg) translateZ(43px);
          transform: rotateY(117deg) translateZ(43px);
}
.depth:nth-child(11) .shooting {
  left: 61%;
  -webkit-animation-delay: -6959ms;
          animation-delay: -6959ms;
}
.depth:nth-child(12) {
  -webkit-transform: rotateY(23deg) translateZ(-34px);
          transform: rotateY(23deg) translateZ(-34px);
}
.depth:nth-child(12) .shooting {
  left: 52%;
  -webkit-animation-delay: -7965ms;
          animation-delay: -7965ms;
}
.depth:nth-child(13) {
  -webkit-transform: rotateY(176deg) translateZ(-37px);
          transform: rotateY(176deg) translateZ(-37px);
}
.depth:nth-child(13) .shooting {
  left: 69%;
  -webkit-animation-delay: -3107ms;
          animation-delay: -3107ms;
}
.depth:nth-child(14) {
  -webkit-transform: rotateY(207deg) translateZ(7px);
          transform: rotateY(207deg) translateZ(7px);
}
.depth:nth-child(14) .shooting {
  left: 54%;
  -webkit-animation-delay: -6092ms;
          animation-delay: -6092ms;
}
.depth:nth-child(15) {
  -webkit-transform: rotateY(230deg) translateZ(-74px);
          transform: rotateY(230deg) translateZ(-74px);
}
.depth:nth-child(15) .shooting {
  left: 33%;
  -webkit-animation-delay: -9752ms;
          animation-delay: -9752ms;
}
.depth:nth-child(16) {
  -webkit-transform: rotateY(78deg) translateZ(7px);
          transform: rotateY(78deg) translateZ(7px);
}
.depth:nth-child(16) .shooting {
  left: 37%;
  -webkit-animation-delay: -749ms;
          animation-delay: -749ms;
}
.depth:nth-child(17) {
  -webkit-transform: rotateY(120deg) translateZ(65px);
          transform: rotateY(120deg) translateZ(65px);
}
.depth:nth-child(17) .shooting {
  left: 42%;
  -webkit-animation-delay: -4089ms;
          animation-delay: -4089ms;
}
.depth:nth-child(18) {
  -webkit-transform: rotateY(205deg) translateZ(71px);
          transform: rotateY(205deg) translateZ(71px);
}
.depth:nth-child(18) .shooting {
  left: 50%;
  -webkit-animation-delay: -623ms;
          animation-delay: -623ms;
}
.depth:nth-child(19) {
  -webkit-transform: rotateY(8deg) translateZ(-86px);
          transform: rotateY(8deg) translateZ(-86px);
}
.depth:nth-child(19) .shooting {
  left: 54%;
  -webkit-animation-delay: -668ms;
          animation-delay: -668ms;
}
.depth:nth-child(20) {
  -webkit-transform: rotateY(302deg) translateZ(6px);
          transform: rotateY(302deg) translateZ(6px);
}
.depth:nth-child(20) .shooting {
  left: 44%;
  -webkit-animation-delay: -2293ms;
          animation-delay: -2293ms;
}
.depth:nth-child(21) {
  -webkit-transform: rotateY(248deg) translateZ(-31px);
          transform: rotateY(248deg) translateZ(-31px);
}
.depth:nth-child(21) .shooting {
  left: 59%;
  -webkit-animation-delay: -3455ms;
          animation-delay: -3455ms;
}
.depth:nth-child(22) {
  -webkit-transform: rotateY(199deg) translateZ(-45px);
          transform: rotateY(199deg) translateZ(-45px);
}
.depth:nth-child(22) .shooting {
  left: 57%;
  -webkit-animation-delay: -7945ms;
          animation-delay: -7945ms;
}
.depth:nth-child(23) {
  -webkit-transform: rotateY(118deg) translateZ(89px);
          transform: rotateY(118deg) translateZ(89px);
}
.depth:nth-child(23) .shooting {
  left: 33%;
  -webkit-animation-delay: -8204ms;
          animation-delay: -8204ms;
}
.depth:nth-child(24) {
  -webkit-transform: rotateY(136deg) translateZ(33px);
          transform: rotateY(136deg) translateZ(33px);
}
.depth:nth-child(24) .shooting {
  left: 31%;
  -webkit-animation-delay: -1818ms;
          animation-delay: -1818ms;
}
.depth:nth-child(25) {
  -webkit-transform: rotateY(109deg) translateZ(-63px);
          transform: rotateY(109deg) translateZ(-63px);
}
.depth:nth-child(25) .shooting {
  left: 64%;
  -webkit-animation-delay: -3503ms;
          animation-delay: -3503ms;
}
.depth:nth-child(26) {
  -webkit-transform: rotateY(50deg) translateZ(-3px);
          transform: rotateY(50deg) translateZ(-3px);
}
.depth:nth-child(26) .shooting {
  left: 69%;
  -webkit-animation-delay: -275ms;
          animation-delay: -275ms;
}
.depth:nth-child(27) {
  -webkit-transform: rotateY(184deg) translateZ(-90px);
          transform: rotateY(184deg) translateZ(-90px);
}
.depth:nth-child(27) .shooting {
  left: 46%;
  -webkit-animation-delay: -721ms;
          animation-delay: -721ms;
}
.depth:nth-child(28) {
  -webkit-transform: rotateY(1deg) translateZ(14px);
          transform: rotateY(1deg) translateZ(14px);
}
.depth:nth-child(28) .shooting {
  left: 35%;
  -webkit-animation-delay: -5982ms;
          animation-delay: -5982ms;
}
.depth:nth-child(29) {
  -webkit-transform: rotateY(212deg) translateZ(12px);
          transform: rotateY(212deg) translateZ(12px);
}
.depth:nth-child(29) .shooting {
  left: 65%;
  -webkit-animation-delay: -5507ms;
          animation-delay: -5507ms;
}
.depth:nth-child(30) {
  -webkit-transform: rotateY(41deg) translateZ(-31px);
          transform: rotateY(41deg) translateZ(-31px);
}
.depth:nth-child(30) .shooting {
  left: 54%;
  -webkit-animation-delay: -3645ms;
          animation-delay: -3645ms;
}
.depth:nth-child(31) {
  -webkit-transform: rotateY(31deg) translateZ(-81px);
          transform: rotateY(31deg) translateZ(-81px);
}
.depth:nth-child(31) .shooting {
  left: 40%;
  -webkit-animation-delay: -6020ms;
          animation-delay: -6020ms;
}
.depth:nth-child(32) {
  -webkit-transform: rotateY(261deg) translateZ(-10px);
          transform: rotateY(261deg) translateZ(-10px);
}
.depth:nth-child(32) .shooting {
  left: 49%;
  -webkit-animation-delay: -9061ms;
          animation-delay: -9061ms;
}
.depth:nth-child(33) {
  -webkit-transform: rotateY(357deg) translateZ(24px);
          transform: rotateY(357deg) translateZ(24px);
}
.depth:nth-child(33) .shooting {
  left: 41%;
  -webkit-animation-delay: -2285ms;
          animation-delay: -2285ms;
}
.depth:nth-child(34) {
  -webkit-transform: rotateY(27deg) translateZ(-70px);
          transform: rotateY(27deg) translateZ(-70px);
}
.depth:nth-child(34) .shooting {
  left: 40%;
  -webkit-animation-delay: -8912ms;
          animation-delay: -8912ms;
}
.depth:nth-child(35) {
  -webkit-transform: rotateY(282deg) translateZ(37px);
          transform: rotateY(282deg) translateZ(37px);
}
.depth:nth-child(35) .shooting {
  left: 33%;
  -webkit-animation-delay: -9941ms;
          animation-delay: -9941ms;
}
.depth:nth-child(36) {
  -webkit-transform: rotateY(313deg) translateZ(-69px);
          transform: rotateY(313deg) translateZ(-69px);
}
.depth:nth-child(36) .shooting {
  left: 46%;
  -webkit-animation-delay: -5700ms;
          animation-delay: -5700ms;
}
.depth:nth-child(37) {
  -webkit-transform: rotateY(306deg) translateZ(57px);
          transform: rotateY(306deg) translateZ(57px);
}
.depth:nth-child(37) .shooting {
  left: 52%;
  -webkit-animation-delay: -5699ms;
          animation-delay: -5699ms;
}
.depth:nth-child(38) {
  -webkit-transform: rotateY(266deg) translateZ(29px);
          transform: rotateY(266deg) translateZ(29px);
}
.depth:nth-child(38) .shooting {
  left: 33%;
  -webkit-animation-delay: -7988ms;
          animation-delay: -7988ms;
}
.depth:nth-child(39) {
  -webkit-transform: rotateY(54deg) translateZ(-18px);
          transform: rotateY(54deg) translateZ(-18px);
}
.depth:nth-child(39) .shooting {
  left: 37%;
  -webkit-animation-delay: -5444ms;
          animation-delay: -5444ms;
}
.depth:nth-child(40) {
  -webkit-transform: rotateY(195deg) translateZ(-78px);
          transform: rotateY(195deg) translateZ(-78px);
}
.depth:nth-child(40) .shooting {
  left: 35%;
  -webkit-animation-delay: -1968ms;
          animation-delay: -1968ms;
}
.depth:nth-child(41) {
  -webkit-transform: rotateY(145deg) translateZ(57px);
          transform: rotateY(145deg) translateZ(57px);
}
.depth:nth-child(41) .shooting {
  left: 53%;
  -webkit-animation-delay: -8657ms;
          animation-delay: -8657ms;
}
.depth:nth-child(42) {
  -webkit-transform: rotateY(345deg) translateZ(87px);
          transform: rotateY(345deg) translateZ(87px);
}
.depth:nth-child(42) .shooting {
  left: 52%;
  -webkit-animation-delay: -6781ms;
          animation-delay: -6781ms;
}
.depth:nth-child(43) {
  -webkit-transform: rotateY(358deg) translateZ(-94px);
          transform: rotateY(358deg) translateZ(-94px);
}
.depth:nth-child(43) .shooting {
  left: 40%;
  -webkit-animation-delay: -6937ms;
          animation-delay: -6937ms;
}
.depth:nth-child(44) {
  -webkit-transform: rotateY(348deg) translateZ(-92px);
          transform: rotateY(348deg) translateZ(-92px);
}
.depth:nth-child(44) .shooting {
  left: 42%;
  -webkit-animation-delay: -2599ms;
          animation-delay: -2599ms;
}
.depth:nth-child(45) {
  -webkit-transform: rotateY(10deg) translateZ(-78px);
          transform: rotateY(10deg) translateZ(-78px);
}
.depth:nth-child(45) .shooting {
  left: 55%;
  -webkit-animation-delay: -8148ms;
          animation-delay: -8148ms;
}
.depth:nth-child(46) {
  -webkit-transform: rotateY(144deg) translateZ(12px);
          transform: rotateY(144deg) translateZ(12px);
}
.depth:nth-child(46) .shooting {
  left: 56%;
  -webkit-animation-delay: -8099ms;
          animation-delay: -8099ms;
}
.depth:nth-child(47) {
  -webkit-transform: rotateY(91deg) translateZ(21px);
          transform: rotateY(91deg) translateZ(21px);
}
.depth:nth-child(47) .shooting {
  left: 69%;
  -webkit-animation-delay: -4710ms;
          animation-delay: -4710ms;
}
.depth:nth-child(48) {
  -webkit-transform: rotateY(3deg) translateZ(-32px);
          transform: rotateY(3deg) translateZ(-32px);
}
.depth:nth-child(48) .shooting {
  left: 34%;
  -webkit-animation-delay: -1827ms;
          animation-delay: -1827ms;
}
.depth:nth-child(49) {
  -webkit-transform: rotateY(349deg) translateZ(47px);
          transform: rotateY(349deg) translateZ(47px);
}
.depth:nth-child(49) .shooting {
  left: 37%;
  -webkit-animation-delay: -1744ms;
          animation-delay: -1744ms;
}
.depth:nth-child(50) {
  -webkit-transform: rotateY(96deg) translateZ(88px);
          transform: rotateY(96deg) translateZ(88px);
}
.depth:nth-child(50) .shooting {
  left: 37%;
  -webkit-animation-delay: -7503ms;
          animation-delay: -7503ms;
}
.depth:nth-child(51) {
  -webkit-transform: rotateY(201deg) translateZ(35px);
          transform: rotateY(201deg) translateZ(35px);
}
.depth:nth-child(51) .shooting {
  left: 39%;
  -webkit-animation-delay: -9630ms;
          animation-delay: -9630ms;
}
.depth:nth-child(52) {
  -webkit-transform: rotateY(349deg) translateZ(74px);
          transform: rotateY(349deg) translateZ(74px);
}
.depth:nth-child(52) .shooting {
  left: 68%;
  -webkit-animation-delay: -8337ms;
          animation-delay: -8337ms;
}
.depth:nth-child(53) {
  -webkit-transform: rotateY(20deg) translateZ(-9px);
          transform: rotateY(20deg) translateZ(-9px);
}
.depth:nth-child(53) .shooting {
  left: 52%;
  -webkit-animation-delay: -3001ms;
          animation-delay: -3001ms;
}
.depth:nth-child(54) {
  -webkit-transform: rotateY(212deg) translateZ(-83px);
          transform: rotateY(212deg) translateZ(-83px);
}
.depth:nth-child(54) .shooting {
  left: 42%;
  -webkit-animation-delay: -9009ms;
          animation-delay: -9009ms;
}
.depth:nth-child(55) {
  -webkit-transform: rotateY(22deg) translateZ(3px);
          transform: rotateY(22deg) translateZ(3px);
}
.depth:nth-child(55) .shooting {
  left: 42%;
  -webkit-animation-delay: -9367ms;
          animation-delay: -9367ms;
}
.depth:nth-child(56) {
  -webkit-transform: rotateY(298deg) translateZ(58px);
          transform: rotateY(298deg) translateZ(58px);
}
.depth:nth-child(56) .shooting {
  left: 47%;
  -webkit-animation-delay: -1676ms;
          animation-delay: -1676ms;
}
.depth:nth-child(57) {
  -webkit-transform: rotateY(286deg) translateZ(30px);
          transform: rotateY(286deg) translateZ(30px);
}
.depth:nth-child(57) .shooting {
  left: 46%;
  -webkit-animation-delay: -9194ms;
          animation-delay: -9194ms;
}
.depth:nth-child(58) {
  -webkit-transform: rotateY(115deg) translateZ(-63px);
          transform: rotateY(115deg) translateZ(-63px);
}
.depth:nth-child(58) .shooting {
  left: 58%;
  -webkit-animation-delay: -7447ms;
          animation-delay: -7447ms;
}
.depth:nth-child(59) {
  -webkit-transform: rotateY(91deg) translateZ(91px);
          transform: rotateY(91deg) translateZ(91px);
}
.depth:nth-child(59) .shooting {
  left: 35%;
  -webkit-animation-delay: -4677ms;
          animation-delay: -4677ms;
}
.depth:nth-child(60) {
  -webkit-transform: rotateY(51deg) translateZ(21px);
          transform: rotateY(51deg) translateZ(21px);
}
.depth:nth-child(60) .shooting {
  left: 36%;
  -webkit-animation-delay: -7728ms;
          animation-delay: -7728ms;
}
.depth:nth-child(61) {
  -webkit-transform: rotateY(141deg) translateZ(-27px);
          transform: rotateY(141deg) translateZ(-27px);
}
.depth:nth-child(61) .shooting {
  left: 52%;
  -webkit-animation-delay: -54ms;
          animation-delay: -54ms;
}
.depth:nth-child(62) {
  -webkit-transform: rotateY(190deg) translateZ(-38px);
          transform: rotateY(190deg) translateZ(-38px);
}
.depth:nth-child(62) .shooting {
  left: 34%;
  -webkit-animation-delay: -8455ms;
          animation-delay: -8455ms;
}
.depth:nth-child(63) {
  -webkit-transform: rotateY(107deg) translateZ(86px);
          transform: rotateY(107deg) translateZ(86px);
}
.depth:nth-child(63) .shooting {
  left: 63%;
  -webkit-animation-delay: -9493ms;
          animation-delay: -9493ms;
}
.depth:nth-child(64) {
  -webkit-transform: rotateY(203deg) translateZ(90px);
          transform: rotateY(203deg) translateZ(90px);
}
.depth:nth-child(64) .shooting {
  left: 36%;
  -webkit-animation-delay: -5446ms;
          animation-delay: -5446ms;
}
.depth:nth-child(65) {
  -webkit-transform: rotateY(23deg) translateZ(-66px);
          transform: rotateY(23deg) translateZ(-66px);
}
.depth:nth-child(65) .shooting {
  left: 64%;
  -webkit-animation-delay: -4399ms;
          animation-delay: -4399ms;
}
.depth:nth-child(66) {
  -webkit-transform: rotateY(31deg) translateZ(-56px);
          transform: rotateY(31deg) translateZ(-56px);
}
.depth:nth-child(66) .shooting {
  left: 34%;
  -webkit-animation-delay: -7076ms;
          animation-delay: -7076ms;
}
.depth:nth-child(67) {
  -webkit-transform: rotateY(42deg) translateZ(-99px);
          transform: rotateY(42deg) translateZ(-99px);
}
.depth:nth-child(67) .shooting {
  left: 37%;
  -webkit-animation-delay: -1462ms;
          animation-delay: -1462ms;
}
.depth:nth-child(68) {
  -webkit-transform: rotateY(194deg) translateZ(-56px);
          transform: rotateY(194deg) translateZ(-56px);
}
.depth:nth-child(68) .shooting {
  left: 54%;
  -webkit-animation-delay: -1254ms;
          animation-delay: -1254ms;
}
.depth:nth-child(69) {
  -webkit-transform: rotateY(202deg) translateZ(-24px);
          transform: rotateY(202deg) translateZ(-24px);
}
.depth:nth-child(69) .shooting {
  left: 62%;
  -webkit-animation-delay: -9965ms;
          animation-delay: -9965ms;
}
.depth:nth-child(70) {
  -webkit-transform: rotateY(142deg) translateZ(55px);
          transform: rotateY(142deg) translateZ(55px);
}
.depth:nth-child(70) .shooting {
  left: 64%;
  -webkit-animation-delay: -7776ms;
          animation-delay: -7776ms;
}
.depth:nth-child(71) {
  -webkit-transform: rotateY(147deg) translateZ(-30px);
          transform: rotateY(147deg) translateZ(-30px);
}
.depth:nth-child(71) .shooting {
  left: 49%;
  -webkit-animation-delay: -264ms;
          animation-delay: -264ms;
}
.depth:nth-child(72) {
  -webkit-transform: rotateY(270deg) translateZ(-32px);
          transform: rotateY(270deg) translateZ(-32px);
}
.depth:nth-child(72) .shooting {
  left: 61%;
  -webkit-animation-delay: -8822ms;
          animation-delay: -8822ms;
}
.depth:nth-child(73) {
  -webkit-transform: rotateY(307deg) translateZ(41px);
          transform: rotateY(307deg) translateZ(41px);
}
.depth:nth-child(73) .shooting {
  left: 61%;
  -webkit-animation-delay: -2690ms;
          animation-delay: -2690ms;
}
.depth:nth-child(74) {
  -webkit-transform: rotateY(228deg) translateZ(-14px);
          transform: rotateY(228deg) translateZ(-14px);
}
.depth:nth-child(74) .shooting {
  left: 39%;
  -webkit-animation-delay: -6929ms;
          animation-delay: -6929ms;
}
.depth:nth-child(75) {
  -webkit-transform: rotateY(287deg) translateZ(76px);
          transform: rotateY(287deg) translateZ(76px);
}
.depth:nth-child(75) .shooting {
  left: 54%;
  -webkit-animation-delay: -9812ms;
          animation-delay: -9812ms;
}
.depth:nth-child(76) {
  -webkit-transform: rotateY(172deg) translateZ(52px);
          transform: rotateY(172deg) translateZ(52px);
}
.depth:nth-child(76) .shooting {
  left: 56%;
  -webkit-animation-delay: -4626ms;
          animation-delay: -4626ms;
}
.depth:nth-child(77) {
  -webkit-transform: rotateY(304deg) translateZ(62px);
          transform: rotateY(304deg) translateZ(62px);
}
.depth:nth-child(77) .shooting {
  left: 34%;
  -webkit-animation-delay: -5038ms;
          animation-delay: -5038ms;
}
.depth:nth-child(78) {
  -webkit-transform: rotateY(72deg) translateZ(-75px);
          transform: rotateY(72deg) translateZ(-75px);
}
.depth:nth-child(78) .shooting {
  left: 40%;
  -webkit-animation-delay: -5936ms;
          animation-delay: -5936ms;
}
.depth:nth-child(79) {
  -webkit-transform: rotateY(53deg) translateZ(-8px);
          transform: rotateY(53deg) translateZ(-8px);
}
.depth:nth-child(79) .shooting {
  left: 56%;
  -webkit-animation-delay: -2199ms;
          animation-delay: -2199ms;
}
.depth:nth-child(80) {
  -webkit-transform: rotateY(151deg) translateZ(51px);
          transform: rotateY(151deg) translateZ(51px);
}
.depth:nth-child(80) .shooting {
  left: 65%;
  -webkit-animation-delay: -4128ms;
          animation-delay: -4128ms;
}
.depth:nth-child(81) {
  -webkit-transform: rotateY(344deg) translateZ(52px);
          transform: rotateY(344deg) translateZ(52px);
}
.depth:nth-child(81) .shooting {
  left: 31%;
  -webkit-animation-delay: -6550ms;
          animation-delay: -6550ms;
}
.depth:nth-child(82) {
  -webkit-transform: rotateY(360deg) translateZ(96px);
          transform: rotateY(360deg) translateZ(96px);
}
.depth:nth-child(82) .shooting {
  left: 53%;
  -webkit-animation-delay: -6451ms;
          animation-delay: -6451ms;
}
.depth:nth-child(83) {
  -webkit-transform: rotateY(211deg) translateZ(-32px);
          transform: rotateY(211deg) translateZ(-32px);
}
.depth:nth-child(83) .shooting {
  left: 69%;
  -webkit-animation-delay: -1267ms;
          animation-delay: -1267ms;
}
.depth:nth-child(84) {
  -webkit-transform: rotateY(304deg) translateZ(1px);
          transform: rotateY(304deg) translateZ(1px);
}
.depth:nth-child(84) .shooting {
  left: 70%;
  -webkit-animation-delay: -7501ms;
          animation-delay: -7501ms;
}
.depth:nth-child(85) {
  -webkit-transform: rotateY(183deg) translateZ(-36px);
          transform: rotateY(183deg) translateZ(-36px);
}
.depth:nth-child(85) .shooting {
  left: 67%;
  -webkit-animation-delay: -5456ms;
          animation-delay: -5456ms;
}
.depth:nth-child(86) {
  -webkit-transform: rotateY(162deg) translateZ(-75px);
          transform: rotateY(162deg) translateZ(-75px);
}
.depth:nth-child(86) .shooting {
  left: 40%;
  -webkit-animation-delay: -9074ms;
          animation-delay: -9074ms;
}
.depth:nth-child(87) {
  -webkit-transform: rotateY(204deg) translateZ(-55px);
          transform: rotateY(204deg) translateZ(-55px);
}
.depth:nth-child(87) .shooting {
  left: 67%;
  -webkit-animation-delay: -2955ms;
          animation-delay: -2955ms;
}
.depth:nth-child(88) {
  -webkit-transform: rotateY(234deg) translateZ(-75px);
          transform: rotateY(234deg) translateZ(-75px);
}
.depth:nth-child(88) .shooting {
  left: 59%;
  -webkit-animation-delay: -3243ms;
          animation-delay: -3243ms;
}
.depth:nth-child(89) {
  -webkit-transform: rotateY(130deg) translateZ(16px);
          transform: rotateY(130deg) translateZ(16px);
}
.depth:nth-child(89) .shooting {
  left: 38%;
  -webkit-animation-delay: -807ms;
          animation-delay: -807ms;
}
.depth:nth-child(90) {
  -webkit-transform: rotateY(252deg) translateZ(76px);
          transform: rotateY(252deg) translateZ(76px);
}
.depth:nth-child(90) .shooting {
  left: 33%;
  -webkit-animation-delay: -7583ms;
          animation-delay: -7583ms;
}
.depth:nth-child(91) {
  -webkit-transform: rotateY(117deg) translateZ(54px);
          transform: rotateY(117deg) translateZ(54px);
}
.depth:nth-child(91) .shooting {
  left: 31%;
  -webkit-animation-delay: -8283ms;
          animation-delay: -8283ms;
}
.depth:nth-child(92) {
  -webkit-transform: rotateY(274deg) translateZ(60px);
          transform: rotateY(274deg) translateZ(60px);
}
.depth:nth-child(92) .shooting {
  left: 62%;
  -webkit-animation-delay: -1657ms;
          animation-delay: -1657ms;
}
.depth:nth-child(93) {
  -webkit-transform: rotateY(135deg) translateZ(-23px);
          transform: rotateY(135deg) translateZ(-23px);
}
.depth:nth-child(93) .shooting {
  left: 68%;
  -webkit-animation-delay: -2840ms;
          animation-delay: -2840ms;
}
.depth:nth-child(94) {
  -webkit-transform: rotateY(44deg) translateZ(-17px);
          transform: rotateY(44deg) translateZ(-17px);
}
.depth:nth-child(94) .shooting {
  left: 62%;
  -webkit-animation-delay: -5611ms;
          animation-delay: -5611ms;
}
.depth:nth-child(95) {
  -webkit-transform: rotateY(241deg) translateZ(-70px);
          transform: rotateY(241deg) translateZ(-70px);
}
.depth:nth-child(95) .shooting {
  left: 64%;
  -webkit-animation-delay: -784ms;
          animation-delay: -784ms;
}
.depth:nth-child(96) {
  -webkit-transform: rotateY(40deg) translateZ(-3px);
          transform: rotateY(40deg) translateZ(-3px);
}
.depth:nth-child(96) .shooting {
  left: 34%;
  -webkit-animation-delay: -6743ms;
          animation-delay: -6743ms;
}
.depth:nth-child(97) {
  -webkit-transform: rotateY(335deg) translateZ(89px);
          transform: rotateY(335deg) translateZ(89px);
}
.depth:nth-child(97) .shooting {
  left: 32%;
  -webkit-animation-delay: -4863ms;
          animation-delay: -4863ms;
}
.depth:nth-child(98) {
  -webkit-transform: rotateY(336deg) translateZ(-77px);
          transform: rotateY(336deg) translateZ(-77px);
}
.depth:nth-child(98) .shooting {
  left: 46%;
  -webkit-animation-delay: -2892ms;
          animation-delay: -2892ms;
}
.depth:nth-child(99) {
  -webkit-transform: rotateY(55deg) translateZ(-77px);
          transform: rotateY(55deg) translateZ(-77px);
}
.depth:nth-child(99) .shooting {
  left: 53%;
  -webkit-animation-delay: -6946ms;
          animation-delay: -6946ms;
}
.depth:nth-child(100) {
  -webkit-transform: rotateY(31deg) translateZ(30px);
          transform: rotateY(31deg) translateZ(30px);
}
.depth:nth-child(100) .shooting {
  left: 58%;
  -webkit-animation-delay: -8538ms;
          animation-delay: -8538ms;
}
.depth:nth-child(101) {
  -webkit-transform: rotateY(20deg) translateZ(42px);
          transform: rotateY(20deg) translateZ(42px);
}
.depth:nth-child(101) .shooting {
  left: 46%;
  -webkit-animation-delay: -8816ms;
          animation-delay: -8816ms;
}
.depth:nth-child(102) {
  -webkit-transform: rotateY(82deg) translateZ(-82px);
          transform: rotateY(82deg) translateZ(-82px);
}
.depth:nth-child(102) .shooting {
  left: 69%;
  -webkit-animat.........完整代码请登录后点击上方下载按钮下载查看