2022-纯css3飞翔的小鸟

于 2022-11-08 11:15:01 发布
阅读量541 收藏
点赞数
分类专栏： css web前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itwangyang520/article/details/127747147
版权

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

<!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>
itwangyang520
关注
专栏目录
css实现飞翔的鸟
HAI6545的博客
01-13 444
<!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>飞翔的小鸟&l.
2022web前端全栈完整整理——（二）csscss3篇
Bejpse的博客
05-13 274
1. css基础：https://alex-ss.blog.csdn.net/article/details/83053901 2. css3新增属性值initial：可直接取消某个元素指定的样式值使其变为默认值，如color:initial。 3. vue3中的.vue文件的style里的css可以使用js/ts中的声明变量，且支持双向响应：属性：v-bind(js/ts变量)。 <template> <div class='ace_class'>文本颜色</div&
纯css会飞的小鸟
08-24
纯css3制作的动画特效
小游戏---html飞翔的小鸟
any0122的博客
11-05 614
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>飞翔的小鸟</title> <style type="text/css"> @keyframes move{ 0% {top: 100px;} ...
纯CSS实现飞翔的小鸟【附整体代码】
青9的blog
12-06 809
学习本文，你可以学习到以下知识????: border 绘制简单几何图形 transform 与 animation 知识 收获一只可爱的飞鸟
纯css3绘制飞翔的鲸鱼和小鸟动画特效
09-09
纯css3绘制飞翔的鲸鱼和小鸟动画特效
jQuery CSS3动画小鸟飞翔.zip
07-11
代码片段： ...$(".box > div").css('transform','rotateY(180deg)'); }}).animate({ 'marginLeft': 50, },5000,function(){ $(".box > div").css('transform','rotateY(0deg)'); }); },1000);
jQuery/CSS3实现小鸟飞翔动画
04-16
解压密码：RJ4587 这是一个基于jQuery和CSS3的小鸟飞翔动画，动画的实现原理并不难，准备8张小鸟飞翔时的图片，然后利用jQuery让8张图片循环播放，形成简单的小鸟飞翔动画特效。之前也分享过一款基于HTML5的卡通小鸟动画，也是十分可爱。
CSS3实现动画-飞翔的小鸟
freesky的专栏
09-16 2683
CSS3实现动画-飞翔的小鸟     以前的时候动画都是flash,flash存在着种种弊端，当c3动画出来后，就是这个问题有了新的解决方案，使一切变得简单可操作。    在这个例子中，动画中实现了鸟翅膀的煽动，以及云彩的移动，所以c3很强大，仅仅用了这点代码就能实现动态效果。直接上代码： birdfly body {
动态游戏界面---飞翔的小鸟.zip
11-10
《飞翔的小鸟》是一款...总之，《飞翔的小鸟》这个游戏虽然简单，但它综合运用了HTML、CSS和JavaScript等多种Web技术，展示了游戏开发的基本流程和关键技巧。对于想要学习游戏开发的人来说，这是一个很好的实践项目。
纯css飞鸟过渡页
03-03
无简介，这就是个过渡的页面，用于等候过程中的页面，详情请下载查看
【战场小包】【CSS】CSS实现一只自由飞翔的鸟儿
南方者的博客
07-11 240
本文使用css实现一只飞翔的鸟儿🐤。阅读本文🍔: 你可以学习使用border实现简单图形、transform和animation知识以及收获一只可爱的飞鸟。我是一只小小小小鸟，🐤🐥🐥🐤
C语言跳过障碍物小游戏,html5飞翔的小鸟越过障碍物小游戏代码
weixin_32149443的博客
05-23 766
一款简单好玩的html5 canvas飞翔的小鸟越过障碍物小游戏代码，玩法：点击鼠标控制小鸟飞行。查看演示下载资源：11次 下载资源下载积分：30积分js代码 var cvs = document.querySelector( '#cvs' );var ctx = cvs.getContext( '2d' );util.loadImage...
html+js+css飞鸟程序
04-23
实现可视化飞鸟代码！HTML5+js+css
CSS3的飞入飞出动画
weixin_45979310的博客
09-09 617
在要动画的元素上加上样式 animation: showModRight .6s ease-in; -webkit-animation: showModRight .6s ease-in; showModRight ： 自右向左 showModLeft ： 自左向右 linear ： 匀速 ease ： 由慢变快再慢 ease-in ：由慢变快 ease-out： 由快变慢 ease-in-out： 慢快慢 ...
jQuery+CSS3小鸟飞翔动画代码
06-10
jQuery+CSS3小鸟飞翔动画特效是一款利用css3的keyframes属性制作的小鸟飞翔动画代码。
html 飞翔的小鸟(Flappy Bird)小游戏
12-27
代码有注释简单易懂
HTML5像素小鸟飞行游戏.zip
07-04
HTML5像素小鸟飞行游戏，是一款简单又困难的手机游戏，游戏中玩家必须控制一只胖乎乎的小鸟，跨越由各种不同长度水管所组成的障碍。上手容易，但是想通关可不简单。
飞翔的小鸟java源码-ApexPigeon:ApexPigeon手机/HTML5游戏
06-06
飞翔的小鸟java源码======== Apex Pigeon - 街机“亚军”游戏 灾难降临了。 当其他鸟飞走时，你（Apex Pigeon）飞向它。 在躲避沿途物体的同时尽可能飞得更远。 获得全球高分。 尝试并在在线排行榜上名列前茅并击败您的同行！ 这场比赛旨在具有挑战性。 不要指望一场轻松的胜利！ 游戏背后的代码 该项目的目标是创建一个不间断的“跑步者”游戏。 本质上，一种游戏，其中用户控制的精灵（在本例中为 Pigeon）不断向前移动，直到它与另一个对象发生碰撞。 该游戏是使用开源 Libgdx 框架和 Box2D 物理库构建的。 Libgdx 框架带有一个“核心”模块以及用于桌面、HTML/GWT、Android 和 IOS 的模块。 该框架允许在“核心”模块中维护游戏，同时提供创建游戏的特定模块版本的选项。 屏幕 为简单起见，游戏仅使用四个主屏幕构建。 主菜单屏幕、游戏屏幕（包含游戏玩法的主屏幕）、高分屏幕和设置屏幕。 用户可以从主菜单中选择他们想要访问的屏幕。 每个屏幕还可以通过后退箭头按钮访问主菜单屏幕。 有第五个屏幕，游戏结束屏幕，当鸽子崩溃时显示。 游戏画面 / 游
DOM综合案例-飞翔的小鸟
张培跃的个人博客
04-11 3626
通过jsDOM完成的一个小游戏
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值