css实现面包飞行动画效果代码-html代码-BFW代码库

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  display: grid;
  place-items: center;
  height: 100vh;
  overflow: hidden;
  background: #adfaff;
  perspective: 50vmin;
  transform-style: preserve-3d;
}
body:before, body:after {
  transform-style: preserve-3d;
  content: "";
  position: absolute;
  width: 300vw;
  height: 100vh;
  top: 0;
  left: 0;
  --dir: 1200px;
  z-index: -1;
  --angle: -90deg;
  background: linear-gradient(var(--angle), #adfaff, transparent), radial-gradient(circle at center, #fff 50px, transparent 50px) 0px 50%/600px 100vh, radial-gradient(circle at center, #fff 40px, transparent 40px) 50px calc(50% + 20px)/600px 100vh, radial-gradient(circle at center, #fff 30px, transparent 30px) -50px calc( 50% + 30px )/600px 100vh, radial-gradient(circle at center, #fff 50px, transparent 50px) 0px 50%/600px 100vh, radial-gradient(circle at center, #fff 40px, transparent 40px) 50px calc(50% + 20px)/600px 100vh, radial-gradient(circle at center, #fff 30px, transparent 30px) -50px calc( 50% + 30px )/600px 100vh;
  transform-origin: left;
  transform: rotateY(80deg);
  -webkit-animation: flight 1.5s linear infinite;
          animation: flight 1.5s linear infinite;
}
@-webkit-keyframes flight {
  from {
    background-position: 50% 50%, 0px calc(50% - 150px), 50px calc(50% + 20px - 150px), -50px calc(50% + 30px - 150px), -300px 220px, -250px calc(220px + 20px), -350px calc(220px + 30px);
  }
  to {
    background-position: 50% 50%, calc(0px + var(--dir)) calc(50% - 150px), calc(50px + var(--dir)) calc(50% + 20px - 150px), calc(-50px + var(--dir)) calc(50% + 30px - 150px), calc(-300px + var(--dir)) 220px, calc(-250px + var(--dir)) calc(220px + 20px), calc(-350px + var(--dir)) calc(220px + 30px);
  }
}
@keyframes flight {
  from {
    background-position: 50% 50%, 0px calc(50% - 150px), 50px calc(50% + 20px - 150px), -50px calc(50% + 30px - 150px), -300px 220px, -250px calc(220px + 20px), -350px calc(220px + 30px);
  }
  to {
    background-position: 50% 50%, calc(0px + var(--dir)) calc(50% - 150px), calc(50px + var(--dir)) calc(50% + 20px - 150px), calc(-50px + var(--dir)) calc(50% + 30px - 150px), calc(-300px + var(--dir)) 220px, calc(-250px + var(--dir)) calc(220px + 20px), calc(-350px + var(--dir)) calc(220px + 30px);
  }
}
body:after {
  --dir: -1200px;
  left: auto;
  right: 0;
  transform-origin: right;
  transform: rotateY(-80deg);
  -webkit-animation-delay: -0.75s;
          animation-delay: -0.75s;
  --angle: 90deg;
}
body div {
  position: absolute;
  top: calc(50% - 225px);
  left: calc(50% - 300px);
  width: 300px;
  height: 450px;
  background: #fff;
  overflow: hidden;
  -webkit-box-reflect: right -1px;
  background: radial-gradient(ellipse at bottom right, #deca91 50%, transparent 50%) 100% 25px/240px 160px no-repeat;
  -webkit-animation: bun 2s ease-in-out infinite, fly 4s ease-in-out infinite;
          animation: bun 2s ease-in-out infinite, fly 4s ease-in-out infinite;
  transform: scale(0.75) rotate(0deg);
}
@-webkit-keyframes fly {
  25% {
    transform: scale(0.5) rotate(10deg) translateX(100px);
  }
  75% {
    transform: scale(0.8) rotate(-10deg);
  }
}
@keyframes fly {
  25% {
    transform: scale(0.5) rotate(10deg) translateX(100px);
  }
  75% {
    transform: scale(0.8) rotate(-10deg);
  }
}
@-webkit-keyframes bun {
  0% {
    background-position: 100% 0px;
  }
  25% {
    background-position: 100% 30px;
  }
  50% {
    background-position: 100% 0px;
  }
  75% {
    background-position: 100% 30px;
  }
  100% {
    background-position: 100% 0px;
  }
}
@keyframes bun {
  0% {
    background-position: 100% 0px;
  }
  25% {
    background-position: 100% 30px;
  }
  50% {
    background-position: 100% 0px;
  }
  75% {
    background-position: 100% 30px;
  }
  100% {
    background-position: 100% 0px;
  }
}
body div:before {
  -webkit-animation: bend1 2s ease-in-out infinite, float 4s ease-in-out infinite alternate;
          animation: bend1 2s ease-in-out infinite, float 4s ease-in-out infinite alternate;
  box-shadow: 0px 0px 0px, -7.5px -0.0833333333px 0px #7d6243, -15px -0.3333333333px 0px #7d6243, -22.5px -0.75px 0px #7d6243, -30px -1.3333333333px 0px #7d6243, -37.5px -2.0833333333px 0px #7d6243, -45px -3px 0px #7d6243, -52.5px -4.0833333333px 0px #7d6243, -60px -5.3333333333px 0px #7d6243, -67.5px -6.75px 0px #7d6243, -75px -8.3333333333px 0px #7d6243, -82.5px -10.0833333333px 0px #7d6243, -90px -12px 0px #7d6243, -97.5px -14.0833333333px 0px #7d6243, -105px -16.3333333333px 0px #7d6243, -112.5px -18.75px 0px #7d6243, -120px -21.3333333333px 0px #7d6243, -127.5px -24.0833333333px 0px #7d6243, -135px -27px 0px #7d6243, -142.5px -30.0833333333px 0px #7d6243, -150px -33.3333333333px 0px #7d6243, 0px 0px 0px, -5px -30.03125px 0px -10px #ffda4a, -10px -30.125px 0px -10px #ffda4a, -15px -30.28125px 0px -10px #ffda4a, -20px -30.5px 0px -10px #ffda4a, -25px -30.78125px 0px -10px #ffda4a, -30px -31.125px 0px -10px #ffda4a, -35px -31.53125px 0px -10px #ffda4a, -40px -32px 0px -10px #ffda4a, -45px -32.53125px 0px -10px #ffda4a, -50px -33.125px 0px -10px #ffda4a, -55px -33.78125px 0px -10px #ffda4a, -60px -34.5px 0px -10px #ffda4a, -65px -35.28125px 0px -10px #ffda4a, -70px -36.125px 0px -10px #ffda4a, -75px -37.03125px 0px -10px #ffda4a, -80px -38px 0px -10px #ffda4a, -85px -39.03125px 0px -10px #ffda4a, -90px -40.125px 0px -10px #ffda4a, -95px -41.28125px 0px -10px #ffda4a, -100px -42.5px 0px -10px #ffda4a, -105px -43.78125px 0px -10px #ffda4a, -110px -45.125px 0px -10px #ffda4a, -115px -46.53125px 0px -10px #ffda4a, -120px -48px 0px -10px #ffda4a, 0px 0px 0px, -35px -50.05px 0px -15px #007538, -40px -50.2px 0px -15px #007538, -45px -50.45px 0px -15px #007538, -50px -50.8px 0px -15px #007538, -55px -51.25px 0px -15px #007538, -60px -51.8px 0px -15px #007538, -65px -52.45px 0px -15px #007538, -70px -53.2px 0px -15px #007538, -75px -54.05px 0px -15px #007538, -80px -55px 0px -15px #007538, -85px -56.05px 0px -15px #007538, -90px -57.2px 0px -15px #007538, 0px 0px 0px, -7px 69.95px 0px -5px #eaddb8, -14px 69.8px 0px -5px #eaddb8, -21px 69.55px 0px -5px #eaddb8, -28px 69.2px 0px -5px #eaddb8, -35px 68.75px 0px -5px #eaddb8, -42px 68.2px 0px -5px #eaddb8, -49px 67.55px 0px -5px #eaddb8, -56px 66.8px 0px -5px #eaddb8, -63px 65.95px 0px -5px #eaddb8, -70px 65px 0px -5px #eaddb8, -77px 63.95px 0px -5px #eaddb8, -84px 62.8px 0px -5px #eaddb8, -91px 61.55px 0px -5px #eaddb8, -98px 60.2px 0px -5px #eaddb8, -105px 58.75px 0px -5px #eaddb8, -112px 57.2px 0px -5px #eaddb8, -119px 55.55px 0px -5px #eaddb8, -126px 53.8px 0px -5px #eaddb8, -133px 51.95px 0px -5px #eaddb8, -140px 50px 0px -5px #eaddb8, 0px 0px 0px, -6.5px 89.9583333333px 0px 7.5px #deca91, -13px 89.8333333333px 0px 7.5px #deca91, -19.5px 89.625px 0px 7.5px #deca91, -26px 89.3333333333px 0px 7.5px #deca91, -32.5px 88.9583333333px 0px 7.5px #deca91, -39px 88.5px 0px 7.5px #deca91, -45.5px 87.9583333333px 0px 7.5px #deca91, -52px 87.3333333333px 0px 7.5px #deca91, -58.5px 86.625px 0px 7.5px #deca91, -65px 85.8333333333px 0px 7.5px #deca91, -71.5px 84.9583333333px 0px 7.5px #deca91, -78px 84px 0px 7.5px #deca91, -84.5px 82.9583333333px 0px 7.5px #deca91, -91px 81.8333333333px 0px 7.5px #deca91, -97.5px 80.625px 0px 7.5px #deca91, -104px 79.3333333333px 0px 7.5px #deca91, -110.5px 77.9583333333px 0px 7.5px #deca91, -117px 76.5px 0px 7.5px #deca91, -123.5px 74.9583333333px 0px 7.5px #deca91, -130px 73.3333333333px 0px 7.5px #deca91;
  background: #7d6243;
  z-index: 3;
  --offset: 20;
}
body div:after {
  -webkit-animation: bend2 2s ease-in-out infinite -0.125s, float 4s ease-in-out infinite alternate -2s;
          animation: bend2 2s ease-in-out infinite -0.125s, float 4s ease-in-out infinite alternate -2s;
  box-shadow: 10px 20px 0px #9ecb62, -5px 29.9666666667px 0px -5px #9ecb62, -10px 29.8666666667px 0px -5px #9ecb62, -15px 29.7px 0px -5px #9ecb62, -20px 29.4666666667px 0px -5px #9ecb62, -25px 29.1666666667px 0px -5px #9ecb62, -30px 28.8px 0px -5px #9ecb62, -35px 28.3666666667px 0px -5px #9ecb62, -40px 27.8666666667px 0px -5px #9ecb62, -45px 27.3px 0px -5px #9ecb62, -50px 26.6666666667px 0px -5px #9ecb62, -55px 25.9666666667px 0px -5px #9ecb62, -60px 25.2px 0px -5px #9ecb62, -65px 24.3666666667px 0px -5px #9ecb62, -70px 23.4666666667px 0px -5px #9ecb62, -75px 22.5px 0px -5px #9ecb62, -80px 21.4666666667px 0px -5px #9ecb62, -85px 20.3666666667px 0px -5px #9ecb62, -90px 19.2px 0px -5px #9ecb62, -95px 17.9666666667px 0px -5px #9ecb62, -100px 16.6666666667px 0px -5px #9ecb62, -105px 15.3px 0px -5px #9ecb62, -110px 13.8666666667px 0px -5px #9ecb62, -115px 12.3666666667px 0px -5px #9ecb62, -120px 10.8px 0px -5px #9ecb62, 0px 0px 0px, -20px -50.0666666667px 0px -10px #da3743, -25px -50.2666666667px 0px -10px #da3743, -30px -50.6px 0px -10px #da3743, -35px -51.0666666667px 0px -10px #da3743, -40px -51.6666666667px 0px -10px #da3743, -45px -52.4px 0px -10px #da3743, -50px -53.2666666667px 0px -10px #da3743, -55px -54.2666666667px 0px -10px #da3743, -60px -55.4px 0px -10px #da3743, -65px -56.6666666667px 0px -10px #da3743, -70px -58.0666666667px 0px -10px #da3743, -75px -59.6px 0px -10px #da3743, -80px -61.2666666667px 0px -10px #da3743, -85px -63.0666666667px 0px -10px #da3743, -90px -65px 0px -10px #da3743, -95px -67.0666666667px 0px -10px #da3743, -100px -69.2666666667px 0px -10px #da3743, 0px 0px 0px, -7px -70.05px 0px 10px #eaddb8, -14px -70.2px 0px 10px #eaddb8, -21px -70.45px 0px 10px #eaddb8, -28px -70.8px 0px 10px #eaddb8, -35px -71.25px 0px 10px #eaddb8, -42px -71.8px 0px 10px #eaddb8, -49px -72.45px 0px 10px #eaddb8, -56px -73.2px 0px 10px #eaddb8, -63px -74.05px 0px 10px #eaddb8, -70px -75px 0px 10px #eaddb8, -77px -76.05px 0px 10px #eaddb8, -84px -77.2px 0px 10px #eaddb8, -91px -78.45px 0px 10px #eaddb8, -98px -79.8px 0px 10px #eaddb8, -105px -81.25px 0px 10px #eaddb8, -112px -82.8px 0px 10px #eaddb8, -119px -84.45px 0px 10px #eaddb8, -126px -86.2px 0px 10px #eaddb8, -133px -88.05px 0px 10px #eaddb8, -140px -90px 0px 10px #eaddb8;
  background: transparent;
  --offset: 10;
  z-index: 1;
}
body div:before, body div:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  right: -20px;
  border-radius: 100%;
  transform-origin: 150px 50%;
}
@-webkit-keyframes float {
  from {
    transform: translateY(calc(var(--offset) * 1px)) rotate(1.5deg);
  }
  to {
    transform: translateY(calc(var(--offset) * -1px)) rotate(-1.5deg);
  }
}
@keyframes float {
  from {
    transform: translateY(calc(var(--offset) * 1px)) rotate(1.5deg);
  }
  to {
    transform: translateY(calc(var(--offset) * -1px)) rotate(-1.5deg);
  }
}
@-webkit-keyframes bend1 {
  25% {
    box-shadow: 0px 0px 0px, -7.5px 0.0833333333px 0px #7d6243, -15px 0.3333333333px 0px #7d6243, -22.5px 0.75px 0px #7d6243, -30px 1.3333333333px 0px #7d6243, -37.5px 2.0833333333px 0px #7d6243, -45px 3px 0px #7d6243, -52.5px 4.0833333333px 0px #7d6243, -60px 5.3333333333px 0px #7d6243, -67.5px 6.75px 0px #7d6243, -75px 8.3333333333px 0px #7d6243, -82.5px 10.0833333333px 0px #7d6243, -90px 12px 0px #7d6243, -97.5px 14.0833333333px 0px #7d6243, -105px 16.3333333333px 0px #7d6243, -112.5px 18.75px 0px #7d6243, -120px 21.3333333333px 0px #7d6243, -127.5px 24.0833333333px 0px #7d6243, -135px 27px 0px #7d6243, -142.5px 30.0833333333px 0px #7d6243, -150px 33.3333333333px 0px #7d6243, 0px 0px 0px, -5px -29.96875px 0px -10px #ffda4a, -10px -29.875px 0px -10px #ffda4a, -15px -29.71875px 0px -10px #ffda4a, -20px -29.5px 0px -10px #ffda4a, -25px -29.21875px 0px -10px #ffda4a, -30px -28.875px 0px -10px #ffda4a, -35px -28.46875px 0px -10px #ffda4a, -40px -28px 0px -10px #ffda4a, -45px -27.46875px 0px -10px #ffda4a, -50px -26.875px 0px -10px #ffda4a, -55px -26.21875px 0px -10px #ffda4a, -60px -25.5px 0px -10px #ffda4a, -65px -24.71875px 0px -10px #ffda4a, -70px -23.875px 0px -10px #ffda4a, -75px -22.96875px 0px -10px #ffda4a, -80px -22px 0px -10px #ffda4a, -85px -20.96875px 0px -10px #ffda4a, -90px -19.875px 0px -10px #ffda4a, -95px -18.71875px 0px -10px #ffda4a, -100px -17.5px 0px -10px #ffda4a, -105px -16.21875px 0px -10px #ffda4a, -110px -14.875px 0px -10px #ffda4a, -115px -13.46875px 0px -10px #ffda4a, -120px -12px 0px -10px #ffda4a, 0px 0px 0px, -35px -49.95px 0px -15px #007538, -40px -49.8px 0px -15px #007538, -45px -49.55px 0px -15px #007538, -50px -49.2px 0px -15px #007538, -55px -48.75px 0px -15px #007538, -60px -48.2px 0px -15px #007538, -65px -47.55px 0px -15px #007538, -70px -46.8px 0px -15px #007538, -75px -45.95px 0px -15px #007538, -80px -45px 0px -15px #007538, -85px -43.95px 0px -15px #007538, -90px -42.8px 0px -15px #007538, 0px 0px 0px, -7px 70.05px 0px -5px #eaddb8, -14px 70.2px 0px -5px #eaddb8, -21px 70.45px 0px -5px #eaddb8, -28px 70.8px 0px -5px #eaddb8, -35px 71.25px 0px -5px #eaddb8, -42px 71.8px 0px -5px #eaddb8, -49px 72.45px 0px -5px #eaddb8, -56px 73.2px 0px -5px #eaddb8, -63px 74.05px 0px -5px #eaddb8, -70px 75px 0px -5px #eaddb8, -77px 76.05px 0px -5px #eaddb8, -84px 77.2px 0px -5px #eaddb8, -91px 78.45px 0px -5px #eaddb8, -98px 79.8px 0px -5px #eaddb8, -105px 81.25px 0px -5px #eaddb8, -112px 82.8px 0px -5px #eaddb8, -119px 84.45px 0px -5px #eaddb8, -126px 86.2px 0px -5px #eaddb8, -133px 88.05px 0px -5px #eaddb8, -140px 90px 0px -5px #eaddb8, 0px 0px 0px, -6.5px 90.0416666667px 0px 7.5px #deca91, -13px 90.1666666667px 0px 7.5px #deca91, -19.5px 90.375px 0px 7.5px #deca91, -26px 90.6666666667px 0px 7.5px #deca91, -32.5px 91.0416666667px 0px 7.5px #deca91, -39px 91.5px 0px 7.5px #deca91, -45.5px 92.0416666667px 0px 7.5px #deca91, -52px 92.6666666667px 0px 7.5px #deca91, -58.5px 93.375px 0px 7.5px #deca91, -65px 94.1666666667px 0px 7.5px #deca91, -71.5px 95.0416666667px 0px 7.5px #deca91, -78px 96px 0px 7.5px #deca91, -84.5px 97.0416666667px 0px 7.5px #deca91, -91px 98.1666666667px 0px 7.5px #deca91, -97.5px 99.375px 0px 7.5px #deca91, -104px 100.6666666667px 0px 7.5px #deca91, -110.5px 102.0416666667px 0px 7.5px #deca91, -117px 103.5px 0px 7.5px #deca91, -123.5px 105.0416666667px 0px 7.5px #deca91, -130px 106.6666666667px 0px 7.5px #deca91;
  }
  50% {
    box-shadow: 0px 0px 0px, -7.5px -0.05px 0px #7d6243, -15px -0.2px 0px #7d6243, -22.5px -0.45px 0px #7d6243, -30px -0.8px 0px #7d6243, -37.5px -1.25px 0px #7d6243, -45px -1.8px 0px #7d6243, -52.5px -2.45px 0px #7d6243, -60px -3.2px 0px #7d6243, -67.5px -4.05px 0px #7d6243, -75px -5px 0px #7d6243, -82.5px -6.05px 0px #7d6243, -90px -7.2px 0px #7d6243, -97.5px -8.45px 0px #7d6243, -105px -9.8px 0px #7d6243, -112.5px -11.25px 0px #7d6243, -120px -12.8px 0px #7d6243, -127.5px -14.45px 0px #7d6243, -135px -16.2px 0px #7d6243, -142.5px -18.05px 0px #7d6243, -150px -20px 0px #7d6243, 0px 0px 0px, -5px -30.01875px 0px -10px #ffda4a, -10px -30.075px 0px -10px #ffda4a, -15px -30.16875px 0px -10px #ffda4a, -20px -30.3px 0px -10px #ffda4a, -25px -30.46875px 0px -10px #ffda4a, -30px -30.675px 0px -10px #ffda4a, -35px -30.91875px 0px -10px #ffda4a, -40px -31.2px 0px -10px #ffda4a, -45px -31.51875px 0px -10px #ffda4a, -50px -31.875px 0px -10px #ffda4a, -55px -32.26875px 0px -10px #ffda4a, -60px -32.7px 0px -10px #ffda4a, -65px -33.16875px 0px -10px #ffda4a, -70px -33.675px 0px -10px #ffda4a, -75px -34.21875px 0px -10px #ffda4a, -80px -34.8px 0px -10px #ffda4a, -85px -35.41875px 0px -10px #ffda4a, -90px -36.075px 0px -10px #ffda4a, -95px -36.76875px 0px -10px #ffda4a, -100px -37.5px 0px -10px #ffda4a, -105px -38.26875px 0px -10px #ffda4a, -110px -39.075px 0px -10px #ffda4a, -115px -39.91875px 0px -10px #ffda4a, -120px -40.8px 0px -10px #ffda4a, 0px 0px 0px, -35px -50.03px 0px -15px #007538, -40px -50.12px 0px -15px #007538, -45px -50.27px 0px -15px #007538, -50px -50.48px 0px -15px #007538, -55px -50.75px 0px -15px #007538, -60px -51.08px 0px -15px #007538, -65px -51.47px 0px -15px #007538, -70px -51.92px 0px -15px #007538, -75px -52.43px 0px -15px #007538, -80px -53px 0px -15px #007538, -85px -53.63px 0px -15px #007538, -90px -54.32px 0px -15px #007538, 0px 0px 0px, -7px 69.97px 0px -5px #eaddb8, -14px 69.88px 0px -5px #eaddb8, -21px 69.73px 0px -5px #eaddb8, -28px 69.52px 0px -5px #eaddb8, -35px 69.25px 0px -5px #eaddb8, -42px 68.92px 0px -5px #eaddb8, -49px 68.53px 0px -5px #eaddb8, -56px 68.08px 0px -5px #eaddb8, -63px 67.57px 0px -5px #eaddb8, -70px 67px 0px -5px #eaddb8, -77px 66.37px 0px -5px #eaddb8, -84px 65.68px 0px -5px #eaddb8, -91px 64.93px 0px -5px #eaddb8, -98px 64.12px 0px -5px #eaddb8, -105px 63.25px 0px -5px #eaddb8, -112px 62.32px 0px -5px #eaddb8, -119px 61.33px 0px -5px #eaddb8, -126px 60.28px 0px -5px #eaddb8, -133px 59.17px 0px -5px #eaddb8, -140px 58px 0px -5px #eaddb8, 0px 0px 0px, -6.5px 89.975px 0px 7.5px #deca91, -13px 89.9px 0px 7.5px #deca91, -19.5px 89.775px 0px 7.5px #deca91, -26px 89.6px 0px 7.5px #deca91, -32.5px 89.375px 0px 7.5px #deca91, -39px 89.1px 0px 7.5px #deca91, -45.5px 88.775px 0px 7.5px #deca91, -52px 88.4px 0px 7.5px #deca91, -58.5px 87.975px 0px 7.5px #deca91, -65px 87.5px 0px 7.5px #deca91, -71.5px 86.975px 0px 7.5px #deca91, -78px 86.4px 0px 7.5px #deca91, -84.5px 85.775px 0px 7.5px #deca91, -91px 85.1px 0px 7.5px #deca91, -97.5px 84.375px 0px 7.5px #deca91, -104px 83.6px 0px 7.5px #deca91, -110.5px 82.775px 0px 7.5px #deca91, -117px 81.9px 0px 7.5px #deca91, -123.5px 80.975px 0px 7.5px #deca91, -130px 80px 0px 7.5px #deca91;
  }
  75% {
    box-shadow: 0px 0px 0px, -7.5px 0.0666666667px 0px #7d6243, -15px 0.2666666667px 0px #7d6243, -22.5px 0.6px 0px #7d6243, -30px 1.0666666667px 0px #7d6243, -37.5px 1.6666666667px 0px #7d6243, -45px 2.4px 0px #7d6243, -52.5px 3.2666666667px 0px #7d6243, -60px 4.2666666667px 0px #7d6243, -67.5px 5.4px 0px #7d6243, -75px 6.6666666667px 0px #7d6243, -82.5px 8.0666666667px 0px #7d6243, -90px 9.6px 0px #7d6243, -97.5px 11.2666666667px 0px #7d6243, -105px 13.0666666667px 0px #7d6243, -112.5px 15px 0px #7d6243, -120px 17.0666666667px 0px #7d6243, -127.5px 19.2666666667px 0px #7d6243, -135px 21.6px 0px #7d6243, -142.5px 24.0666666667px 0px #7d6243, -150px 26.6666666667px 0px #7d6243, 0px 0px 0px, -5px -29.975px 0px -10px #ffda4a, -10px -29.9px 0px -10px #ffda4a, -15px -29.775px 0px -10px #ffda4a, -20px -29.6px 0px -10px #ffda4a, -25px -29.375px 0px -10px #ffda4a, -30px -29.1px 0px -10px #ffda4a, -35px -28.775px 0px -10px #ffda4a, -40px -28.4px 0px -10px #ffda4a, -45px -27.975px 0px -10px #ffda4a, -50px -27.5px 0px -10px #ffda4a, -55px -26.975px 0px -10px #ffda4a, -60px -26.4px 0px -10px #ffda4a, -65px -25.775px 0px -10px #ffda4a, -70px -25.1px 0px -10px #ffda4a, -75px -24.375px 0px -10px #ffda4a, -80px -23.6px 0px -10px #ffda4a, -85px -22.775px 0px -10px #ffda4a, -90px -21.9px 0px -10px #ffda4a, -95px -20.975px 0px -10px #ffda4a, -100px -20px 0px -10px #ffda4a, -105px -18.975px 0px -10px #ffda4a, -110px -17.9px 0px -10px #ffda4a, -115px -16.775px 0px -10px #ffda4a, -120px -15.6px 0px -10px #ffda4a, 0px 0px 0px, -35px -49.96px 0px -15px #007538, -40px -49.84px 0px -15px #007538, -45px -49.64px 0px -15px #007538, -50px -49.36px 0px -15px #007538, -55px -49px 0px -15px #007538, -60px -48.56px 0px -15px #007538, -65px -48.04px 0px -15px #007538, -70px -47.44px 0px -15px #007538, -75px -46.76px 0px -15px #007538, -80px -46px 0px -15px #007538, -85px -45.16px 0px -15px #007538, -90px -44.24px 0px -15px #007538, 0px 0px 0px, -7px 70.04px 0px -5px #eaddb8, -14px 70.16px 0px -5px #eaddb8, -21px 70.36px 0px -5px #eaddb8, -28px 70.64px 0px -5px #eaddb8, -35px 71px 0px -5px #eaddb8, -42px 71.44px 0px -5px #eaddb8, -49px 71.96px 0px -5px #eaddb8, -56px 72.56px 0px -5px #eaddb8, -63px 73.24px 0px -5px #eaddb8, -70px 74px 0px -5px #eaddb8, -77px 74.84px 0px -5px #eaddb8, -84px 75.76px 0px -5px #eaddb8, -91px 76.76px 0px -5px #eaddb8, -98px 77.84px 0px -5px #eaddb8, -105px 79px 0px -5px #eaddb8, -112px 80.24px 0px -5px #eaddb8, -119px 81.56px 0px -5px #eaddb8, -126px 82.96px 0px -5px #eaddb8, -133px 84.44px 0px -5px #eaddb8, -140px 86px 0px -5px #eaddb8, 0px 0px 0px, -6.5px 90.0333333333px 0px 7.5px #deca91, -13px 90.1333333333px 0px 7.5px #deca91, -19.5px 90.3px 0px 7.5px #deca91, -26px 90.5333333333px 0px 7.5px #deca91, -32.5px 90.8333333333px 0px 7.5px #deca91, -39px 91.2px 0px 7.5px #deca91, -45.5px 91.6333333333px 0px 7.5px #deca91, -52px 92.1333333333px 0px 7.5px #deca91, -58.5px 92.7px 0px 7.5px #deca91, -65px 93.3333333333px 0px 7.5px #deca91, -71.5px 94.0333333333px 0px 7.5px #deca91, -78px 94.8px 0px 7.5px #deca91, -84.5px 95.6333333333px 0px 7.5px #deca91, -91px 96.5333333333px 0px 7.5px #deca91, -97.5px 97.5px 0px 7.5px #deca91, -104px 98.5333333333px 0px 7.5px #deca91, -110.5px 99.6333333333px 0px 7.5px #deca91, -117px 100.8px 0px 7.5px #deca91, -123.5px 102.0333333333px 0px 7.5px #deca91, -130px 103.3333333333px 0px 7.5px #deca91;
  }
}
@keyframes bend1 {
  25% {
    box-shadow: 0px 0px 0px, -7.5px 0.0833333333px 0px #7d6243, -15px 0.3333333333px 0px #7d6243, -22.5px 0.75px 0px #7d6243, -30px 1.3333333333px 0px #7d6243, -37.5px 2.0833333333px 0px #7d6243, -45px 3px 0px #7d6243, -52.5px 4.0833333333px 0px #7d6243, -60px 5.3333333333px 0px #7d6243, -67.5px 6.75px 0px #7d6243, -75px 8.3333333333px 0px #7d6243, -82.5px 10.0833333333px 0px #7d6243, -90px 12px 0px #7d6243, -97.5px 14.0833333333px 0px #7d6243, -105px 16.3333333333px 0px #7d6243, -112.5px 18.75px 0px #7d6243, -120px 21.3333333333px 0px #7d6243, -127.5px 24.0833333333px 0px #7d6243, -135px 27px 0px #7d6243, -142.5px 30.0833333333px 0px #7d6243, -150px 33.3333333333px 0px #7d6243, 0px 0px 0px, -5px -29.96875px 0px -10px #ffda4a, -10px -29.875px 0px -10px #ffda4a, -15px -29.71875px 0px -10px #ffda4a, -20px -29.5px 0px -10px #ffda4a, -25px -29.21875px 0px -10px #ffda4a, -30px -28.875px 0px -10px #ffda4a, -35px -28.46875px 0px -10px #ffda4a, -40px -28px 0px -10px #ffda4a, -45px -27.46875px 0px -10px #ffda4a, -50px -26.875px 0px -10px #ffda4a, -55px -26.21875px 0px -10px #ffda4a, -60px -25.5px 0px -10px #ffda4a, -65px -24.71875px 0px -10px #ffda4a, -70px -23.875px 0px -10px #ffda4a, -75px -22.96875px 0px -10px #ffda4a, -80px -22px 0px -10px #ffda4a, -85px .........完整代码请登录后点击上方下载按钮下载查看