2022-纯css3飞翔的小鸟

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>飞翔的小鸟</title>
    <style>
      body {
        background: #eef;
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #sky {
        margin-top: -60px;
        perspective: 400px;
        filter: drop-shadow(0px 150px 10px rgba(0, 0, 0, 0.2));
      }
      @-moz-document url-prefix() {
        #sky {
          filter: none;
        }
      }
      #sky div {
        transform-style: preserve-3d;
      }
      #sky .bird {
        -webkit-animation: fly 10000ms linear infinite;
        animation: fly 10000ms linear infinite;
      }
      #sky .bird .wind {
        position: absolute;
        left: 50%;
        width: 4px;
        height: 200px;
        margin-left: -2px;
        border-radius: 999px;
        overflow: hidden;
      }
      #sky .bird .wind:nth-child(1) {
        transform: translate3d(189px, -97px, 82px) rotateY(90deg);
      }
      #sky .bird .wind:nth-child(1)::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 300px;
        background: rgba(100, 200, 207, 0.3);
        border-radius: 999px;
        transform: translateY(-300px);
        -webkit-animation: wind 2331ms 1268ms linear infinite;
        animation: wind 2331ms 1268ms linear infinite;
      }
      #sky .bird .wind:nth-child(2) {
        transform: translate3d(132px, 5px, 70px) rotateY(90deg);
      }
      #sky .bird .wind:nth-child(2)::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 300px;
        background: rgba(100, 200, 254, 0.3);
        border-radius: 999px;
        transform: translateY(-300px);
        -webkit-animation: wind 2438ms 1537ms linear infinite;
        animation: wind 2438ms 1537ms linear infinite;
      }
      #sky .bird .wind:nth-child(3) {
        transform: translate3d(65px, -132px, -5px) rotateY(90deg);
      }
      #sky .bird .wind:nth-child(3)::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 300px;
        background: rgba(100, 200, 17, 0.3);
        border-radius: 999px;
        transform: translateY(-300px);
        -webkit-animation: wind 2613ms 2531ms linear infinite;
        animation: wind 2613ms 2531ms linear infinite;
      }
      #sky .bird .wind:nth-child(4) {
        transform: translate3d(-179px, 70px, -25px) rotateY(90deg);
      }
      #sky .bird .wind:nth-child(4)::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 300px;
        background: rgba(100, 200, 124, 0.3);
        border-radius: 999px;
        transform: translateY(-300px);
        -webkit-animation: wind 1421ms 1690ms linear infinite;
        animation: wind 1421ms 1690ms linear infinite;
      }
      #sky .bird .wind:nth-child(5) {
        transform: translate3d(142px, 66px, -87px) rotateY(90deg);
      }
      #sky .bird .wind:nth-child(5)::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 300px;
        background: rgba(100, 200, 127, 0.3);
        border-radius: 999px;
        transform: translateY(-300px);
        -webkit-animation: wind 1639ms 4788ms linear infinite;
        animation: wind 1639ms 4788ms linear infinite;
      }
      #sky .bird .wind:nth-child(6) {
        transform: translate3d(56px, -66px, -72px) rotateY(90deg);
      }
      #sky .bird .wind:nth-child(6)::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 300px;
        background: rgba(100, 200, 147, 0.3);
        border-radius: 999px;
        transform: translateY(-300px);
        -webkit-animation: wind 1856ms 1426ms linear infinite;
        animation: wind 1856ms 1426ms linear infinite;
      }
      #sky .bird .wind:nth-child(7) {
        transform: translate3d(183px, 92px, 74px) rotateY(90deg);
      }
      #sky .bird .wind:nth-child(7)::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 300px;
        background: rgba(100, 200, 31, 0.3);
        border-radius: 999px;
        transform: translateY(-300px);
        -webkit-animation: wind 1585ms 3969ms linear infinite;
        animation: wind 1585ms 3969ms linear infinite;
      }
      #sky .bird .wind:nth-child(8) {
        transform: translate3d(-13px, -33px, 28px) rotateY(90deg);
      }
      #sky .bird .wind:nth-child(8)::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 300px;
        background: rgba(100, 200, 60, 0.3);
        border-radius: 999px;
        transform: translateY(-300px);
        -webkit-animation: wind 1693ms 3611ms linear infinite;
        animation: wind 1693ms 3611ms linear infinite;
      }
      #sky .bird .wind:nth-child(9) {
        transform: translate3d(-68px, -73px, 88px) rotateY(90deg);
      }
      #sky .bird .wind:nth-child(9)::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 300px;
        background: rgba(100, 200, 34, 0.3);
        border-radius: 999px;
        transform: translateY(-300px);
        -webkit-animation: wind 2249ms 3544ms linear infinite;
        animation: wind 2249ms 3544ms linear infinite;
      }
      #sky .bird .wind:nth-child(10) {
        transform: translate3d(174px, -74px, 8px) rotateY(90deg);
      }
      #sky .bird .wind:nth-child(10)::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 300px;
        background: rgba(100, 200, 158, 0.3);
        border-radius: 999px;
        transform: translateY(-300px);
        -webkit-animation: wind 1104ms 4095ms linear infinite;
        animation: wind 1104ms 4095ms linear infinite;
      }
      #sky .bird .wind:nth-child(11) {
        transform: translate3d(-174px, 122px, 20px) rotateY(90deg);
      }
      #sky .bird .wind:nth-child(11)::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 300px;
        background: rgba(100, 200, 116, 0.3);
        border-radius: 999px;
        transform: translateY(-300px);
        -webkit-animation: wind 1100ms 2546ms linear infinite;
        animation: wind 1100ms 2546ms linear infinite;
      }
      #sky .bird_body {
        position: relative;
        width: 30px;
        height: 40px;
        background: #70addd;
      }
      #sky .bird_head {
        position: absolute;
        top: -30px;
        border-right: 15px solid transparent;
        border-bottom: 30px solid #6b83fa;
        border-left: 15px solid transparent;
        transform-origin: 50% 100%;
        transform: rotateX(-20deg);
      }
      #sky .bird_wing_left {
        position: absolute;
        left: -30px;
        height: 30px;
        border-right: 30px solid #a399d1;
        border-bottom: 10px solid transparent;
        transform-origin: 100% 0;
        -webkit-animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1)
          infinite alternate;
        animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite
          alternate;
      }
      #sky .bird_wing_left_top {
        position: absolute;
        left: -30px;
        border-right: 30px solid #929ccf;
        border-bottom: 30px solid transparent;
        transform-origin: 100% 0;
        -webkit-animation: wingLeft 1000ms
          cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
        animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975)
          infinite alternate;
      }
      #sky .bird_wing_right {
        position: absolute;
        left: 30px;
        height: 30px;
        border-left: 30px solid #8567f0;
        border-bottom: 10px solid transparent;
        transform-origin: 0 0;
        -webkit-animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1)
          infinite alternate;
        animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite
          alternate;
      }
      #sky .bird_wing_right_top {
        position: absolute;
        border-left: 30px solid #c0a9e0;
        border-bottom: 30px solid transparent;
        transform-origin: 0 0;
        -webkit-animation: wingRight 1000ms
          cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
        animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975)
          infinite alternate;
      }
      #sky .bird_tail_left {
        position: absolute;
        top: 40px;
        border-right: 30px solid transparent;
        border-top: 40px solid #74a3ff;
        transform-origin: 50% 0;
        transform: rotateX(-20deg);
      }
      #sky .bird_tail_right {
        position: absolute;
        top: 40px;
        border-left: 30px solid transparent;
        border-top: 40px solid #a3c8ce;
        transform-origin: 50% 0;
        transform: rotateX(-20deg);
      }

     @-webkit-keyframes fly {
        0% {
          transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
        }
        100% {
          transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
        }
      }

      @keyframes fly {
        0% {
          transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
        }
        100% {
          transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
        }
      }
      @-webkit-keyframes wingLeft {
        0% {
          transform: rotateY(-40deg);
        }
        100% {
          transform: rotateY(40deg);
        }
      }
      @keyframes wingLeft {
        0% {
          transform: rotateY(-40deg);
        }
        100% {
          transform: rotateY(40deg);
        }
      }
      @-webkit-keyframes wingRight {
        0% {
          transform: rotateY(40deg);
        }
        100% {
          transform: rotateY(-40deg);
        }
      }
      @keyframes wingRight {
        0% {
          transform: rotateY(40deg);
        }
        100% {
          transform: rotateY(-40deg);
        }
      }
      @-webkit-keyframes wind {
        0% {
          transform: translateY(-300px);
        }
        100% {
          transform: translateY(200px);
        }
      }
      @keyframes wind {
        0% {
          transform: translateY(-300px);
        }
        100% {
          transform: translateY(200px);
        }
      }
    </style>
  </head>
  <body>
    <div id="sky">
      <div class="bird">
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="bird_body">
          <div class="bird_head"></div>
          <div class="bird_wing_left">
            <div class="bird_wing_left_top"></div>
          </div>
          <div class="bird_wing_right">
            <div class="bird_wing_right_top"></div>
          </div>
          <div class="bird_tail_left"></div>
          <div class="bird_tail_right"></div>
        </div>
      </div>
    </div>
  </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值