css实现鹦鹉小鸟在蓝天白云下飞翔动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现鹦鹉小鸟在蓝天白云下飞翔动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" class="sky">

<head>
  <meta charset="UTF-8">
  


  <meta name="viewport" content="width=device-width, initial-scale=1">


  
  
<style>
.sky {
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, #ADD8E6 0%, #B5E0EF 100%);
  overflow: hidden;
}

.bird,
.bird *,
.cloud {
  position: absolute;
}
.bird:after, .bird:before,
.bird *:after,
.bird *:before,
.cloud:after,
.cloud:before {
  display: block;
  content: "";
  position: absolute;
}

.bird {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 5;
  -webkit-animation: bird-movement-xy 20s linear infinite alternate both, bird-movement-z 50s linear infinite alternate both;
          animation: bird-movement-xy 20s linear infinite alternate both, bird-movement-z 50s linear infinite alternate both;
}

.b-body {
  top: 0;
  right: 0;
  border-top: 55px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 30px solid #5A5A5A;
  transform: rotate(-90deg);
}
.b-body:after {
  top: -55px;
  right: 30px;
  border-top: 55px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid #75BF75;
  transform: rotate(180deg);
}

.b-wings:before {
  top: 54px;
  right: -51px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 50px solid #5A5A5A;
  transform: rotateZ(90deg) rotateY(90deg);
  -webkit-animation: wing-movement-top 0.8s infinite linear both;
          animation: wing-movement-top 0.8s infinite linear both;
  transform-origin: 0% 0%;
}
.b-wings:after {
  top: 56px;
  right: -11px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 50px solid #A9A9A9;
  transform: rotateZ(-90deg) rotateY(90deg);
  -webkit-animation: wing-movement-bottom 0.8s infinite linear both;
          animation: wing-movement-bottom 0.8s infinite linear both;
  transform-origin: 0% 0%;
}

.b-details {
  top: 39px;
  right: -13px;
  border-top: 0px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #FFFF43;
  transform: rotate(50deg);
}
.b-details:after {
  top: 8px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #2D2D2D;
}

.b-beak {
  top: 43px;
  right: -26px;
  border-top: 0px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 13px solid gray;
  transform: rotate(-90deg);
}
.b-beak:after {
  top: 3px;
  right: 10px;
  border-top: 0px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 11px solid #A9A9A9;
  transform: rotate(90deg);
}

.b-back {
  top: 39px;
  right: 55px;
  border-top: 39px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 10px solid #5A5A5A;
  transform: rotate(-130deg);
}
.b-back:after {
  top: -43px;
  right: 10px;
  border-top: 43px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 9px solid #75BF75;
  transform: scale(-1, 1);
}

.cloud {
  width: 35px;
  height: 11px;
  background-color: #fff;
  border-radius: 100px;
  box-shadow: 0 1px 5px 0px rgba(50, 50, 50, 0.05);
  opacity: 1;
}
.cloud:after, .cloud:before {
  background-color: #fff;
}
.cloud:after {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: -54%;
  left: 14%;
  transform: rotate(-25deg);
}
.cloud:before {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: -90%;
  right: 10%;
}

.cloud:nth-child(1) {
  top: 3%;
  left: 147%;
  transform: scale(3);
  -webkit-animation: cloud-movement-1 41s -9s infinite linear;
          animation: cloud-movement-1 41s -9s infinite linear;
  opacity: 0.92;
  z-index: 4;
}

@-webkit-keyframes cloud-movement-1 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-1 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(2) {
  top: 76%;
  left: 158%;
  transform: scale(0);
  -webkit-animation: cloud-movement-2 42s -8s infinite linear;
          animation: cloud-movement-2 42s -8s infinite linear;
  opacity: 0.92;
  z-index: 1;
}

@-webkit-keyframes cloud-movement-2 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-2 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(3) {
  top: 23%;
  left: 138%;
  transform: scale(4);
  -webkit-animation: cloud-movement-3 20s -30s infinite linear;
          animation: cloud-movement-3 20s -30s infinite linear;
  opacity: 0.92;
  z-index: 5;
}

@-webkit-keyframes cloud-movement-3 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-3 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(4) {
  top: 40%;
  left: 105%;
  transform: scale(4);
  -webkit-animation: cloud-movement-4 23s -27s infinite linear;
          animation: cloud-movement-4 23s -27s infinite linear;
  opacity: 0.92;
  z-index: 5;
}

@-webkit-keyframes cloud-movement-4 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-4 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(5) {
  top: 51%;
  left: 102%;
  transform: scale(6);
  -webkit-animation: cloud-movement-5 23s -27s infinite linear;
          animation: cloud-movement-5 23s -27s infinite linear;
  opacity: 0.92;
  z-index: 7;
}

@-webkit-keyframes cloud-movement-5 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-5 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(6) {
  top: 92%;
  left: 140%;
  transform: scale(0);
  -webkit-animation: cloud-movement-6 39s -11s infinite linear;
          animation: cloud-movement-6 39s -11s infinite linear;
  opacity: 0.92;
  z-index: 1;
}

@-webkit-keyframes cloud-movement-6 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-6 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(7) {
  top: 92%;
  left: 145%;
  transform: scale(1);
  -webkit-animation: cloud-movement-7 48s -2s infinite linear;
          animation: cloud-movement-7 48s -2s infinite linear;
  opacity: 0.92;
  z-index: 2;
}

@-webkit-keyframes cloud-movement-7 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-7 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(8) {
  top: 48%;
  left: 185%;
  transform: scale(0);
  -webkit-animation: cloud-movement-8 12s -38s infinite linear;
          animation: cloud-movement-8 12s -38s infinite linear;
  opacity: 0.92;
  z-index: 1;
}

@-webkit-keyframes cloud-movement-8 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-8 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(9) {
  top: 38%;
  left: 184%;
  transform: scale(1);
  -webkit-animation: cloud-movement-9 43s -7s infinite linear;
          animation: cloud-movement-9 43s -7s infinite linear;
  opacity: 0.92;
  z-index: 2;
}

@-webkit-keyframes cloud-movement-9 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-9 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(10) {
  top: 39%;
  left: 107%;
  transform: scale(3);
  -webkit-animation: cloud-movement-10 29s -21s infinite linear;
          animation: cloud-movement-10 29s -21s infinite linear;
  opacity: 0.92;
  z-index: 4;
}

@-webkit-keyframes cloud-movement-10 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-10 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(11) {
  top: 80%;
  left: 186%;
  transform: scale(4);
  -webkit-animation: cloud-movement-11 30s -20s infinite linear;
          animation: cloud-movement-11 30s -20s infinite linear;
  opacity: 0.92;
  z-index: 5;
}

@-webkit-keyframes cloud-movement-11 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-11 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(12) {
  top: 92%;
  left: 106%;
  transform: scale(6);
  -webkit-animation: cloud-movement-12 35s -15s infinite linear;
          animation: cloud-movement-12 35s -15s infinite linear;
  opacity: 0.92;
  z-index: 7;
}

@-webkit-keyframes cloud-movement-12 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-12 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(13) {
  top: 22%;
  left: 145%;
  transform: scale(4);
  -webkit-animation: cloud-movement-13 15s -35s infinite linear;
          animation: cloud-movement-13 15s -35s infinite linear;
  opacity: 0.92;
  z-index: 5;
}

@-webkit-keyframes cloud-movement-13 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-13 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(14) {
  top: 9%;
  left: 113%;
  transform: scale(6);
  -webkit-animation: cloud-movement-14 22s -28s infinite linear;
          animation: cloud-movement-14 22s -28s infinite linear;
  opacity: 0.92;
  z-index: 7;
}

@-webkit-keyframes cloud-movement-14 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-14 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}
.cloud:nth-child(15) {
  top: 9%;
  left: 126%;
  transform: scale(0);
  -webkit-animation: cloud-movement-15 10s -40s infinite linear;
          animation: cloud-movement-15 10s -40s infinite linear;
  opacity: 0.92;
  z-index: 1;
}

@-webkit-keyframes cloud-movement-15 {
  99.999% {
    opacity: 0.92;
    left: -10%;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cloud-movement-15 {
.........完整代码请登录后点击上方下载按钮下载查看