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