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