CSS3实现动画-飞翔的小鸟

最新推荐文章于 2022-11-28 14:21:20 发布
最新推荐文章于 2022-11-28 14:21:20 发布
阅读量2.6k 收藏 7
点赞数 1
分类专栏： css3 文章标签： CSS3 动画 飞翔的小鸟 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/b1244154318/article/details/52555094
版权

CSS3实现动画-飞翔的小鸟 

   以前的时候动画都是flash,flash存在着种种弊端，当c3动画出来后，就是这个问题有了新的解决方案，使一切变得简单可操作。

   在这个例子中，动画中实现了鸟翅膀的煽动，以及云彩的移动，所以c3很强大，仅仅用了这点代码就能实现动态效果。直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>birdfly</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #77B7ED;
            overflow: hidden;
        }
        .cloud{
            width:100px;
            height:80px;
            border-radius: 50%;
            margin: 100px auto 0px;
            background:#fff;
            position: relative;
            right:-780px;
            border:0px solid gray;
            box-shadow: 50px -30px 0 #fff,100px -45px 0 #fff,120px 0px 0 #fff,50px 0px 0 #fff;
            animation: cloud 3s linear infinite;
        }
        .cloud:after{
            content:"";
            width:140px;
            height:30px;
            display:inline-block;
            position: absolute;
            border-radius: 10px;;
            top: 50px;
            left:20px;
            background:#fff;
            border:0px solid gray;
            z-index:2;

        }
        #cloudp {
               position: absolute;
               top: 140px;
               right: -80px;
               animation: cloud1 5s linear infinite;
           }
        #cloudp2 {
            position: absolute;
            top: 340px;
            left:0;
            animation: cloud1 6s linear infinite;
        }
        .birdbody{
            width:120px;
            height:40px;
            background: -webkit-linear-gradient(top,#ed4961 50%,#ed494a 50%);
            /*background: -webkit-linear-gradient(right,red,blue,yellow);*/
            margin: 150px auto;
            position: relative;
            border-radius: 10px;
        }
        @keyframes fly {
            0%{
                transform:rotateX(0deg)
            }
            50%{
                transform:rotateX(180deg)
            }
            100%{
                transform:rotateX(0deg)
            }
        }

        @keyframes cloud {
            0%{
                left: 60%;
            }
            100%{
                left: -60%;
            }
        }
        @keyframes cloud1 {
            0% {
                left: 180%;
            }
            100% {
                left: -160%;
            }

        }
        .mouse:before{
            content:"";
            height:2px;
            width:2px;
            display:block;
            background: #000;
            position: absolute;
            top:3px;
            left:-5px;
            border-radius: 2px;
            z-index: 3;
        }
        .mouse{
            height:0px;
            width:0px;
            border:8px solid #f9c438;
            background: #fff;
            position: absolute;
            top:5px;
            left:120px;
            border-radius: 0px;
            border-top:8px solid transparent;
            /*border-bottom:10px solid transparent;*/
            border-right:8px solid transparent;
            background:#77B7ED;
        }
        .mouse:after{
            content:"";
            height:0px;
            width:0px;
            display:block;
            border:4px solid #e5ae30;
            background: #fff;
            position: absolute;
            top:10px;
            left:-8px;
            border-radius: 0px;
            /*border-top:8px solid transparent;*/
            border-bottom:8px solid transparent;
            border-right:8px solid transparent;
            background:#77B7ED;
        }
        .eye {
            height: 15px;
            width: 15px;
            border-radius: 50%;
            background: #fff;
            border: 5px solid #701c2c;
            position: relative;
            top: 5px;
            left: 90px;
        }
        .eye:before{
            content:"";
            display:block;
            height:3px;
            width:15px;
            border-radius: 50%;
            background:#701c2c;
            /*border:3px solid #701c2c;*/
            position: relative;
            top:-9px;
            left: 3px;
        }
        .eye:after{
            content:"";
            display:block;
            height:5px;
            width:5px;
            border-radius:50%;
            background:#000;
            position: absolute;
            top:4px;
        }
        .ulgy{
                height:10px;
                width:10px;
                border-radius: 50%;
                background:#f08ca6;
                position: absolute;
                top:10px;
                left:10px;
            }

        .ulgy:before {
            content: "";
            display: block;
            height: 5px;
            width: 5px;
            border-radius: 50%;
            background: #f08ca6;
            position: absolute;
            top: 9px;
            left: 15px;
        }
        .ulgy:after{
            content: "";
            display:block;
            height:6px;
            width:6px;
            border-radius: 50%;
            background:#f08ca6;
            position: absolute;
            top:13px;
            left:5px;
        }
        .wing{
            height:0px;
            width:0px;
            border:40px solid #b6323d;
            position: absolute;
            top:20px;
            left:10px;
            border-bottom:30px solid transparent;
            border-right:30px solid transparent;
            transform-origin: center top;
            animation: fly 0.3s 0s infinite;
            z-index:2;
        }
        .last{
            height:0px;
            width:0px;
            border:35px solid #ec4a61;
            position: absolute;
            top:7px;
            left:-30px;
            border-radius: 10px;
            border-bottom:15px solid transparent;
            border-right:15px solid transparent;
            border-top:15px solid transparent;
        }
    </style>
</head>
<body>
<div class="cloud"></div>
<div class="cloud" id="cloudp"></div>
<div class="cloud" id="cloudp2"></div>

<div class="birdbody">
    <div class="mouse"></div>
    <div class="eye"></div>
    <div class="ulgy"></div>
    <div class="wing"></div>
    <div class="last"></div>
</div>

</body>
</html>




Web攻城狮
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 纯css3小鸟飞动效果
09-08
html5 纯css3小鸟飞动效果
飞起来吧，用 CSS 实现一只自由飞翔的鸟儿
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
11-24 260
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群???? 前言前几天在逛社区时，偶然发现一个非常赏心悦目得 小鸟飞翔效果，并且是纯 css 实现的。这不由让我大感惊奇， ...
css3小鸟飞翔案例代码+css3西游记动画案例代码
weixin_52218117的博客
07-22 220
css3小鸟飞翔案例代码+css3西游记动画案例代码
css实现飞翔的鸟
HAI6545的博客
01-13 403
<!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.
蓝天小鸟飞css3动画js特效
ICode联盟
10-06 103
蓝天小鸟飞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小鸟飞翔动画代码
06-10
在本文中，我们将深入探讨如何使用jQuery和CSS3来创建一款生动有趣的小鸟飞翔动画效果。这个项目的核心在于结合这两种强大的技术，为网页增添动态视觉吸引力。 首先，jQuery是一个广泛使用的JavaScript库，它简化了...
纯css3绘制飞翔的鲸鱼和小鸟动画特效
09-09
本主题“纯css3绘制飞翔的鲸鱼和小鸟动画特效”将深入探讨如何利用CSS3的动画属性来创建动态且生动的视觉效果。 首先，CSS3的动画功能主要由两个关键部分构成：`@keyframes`规则和`animation`属性。`@keyframes`...
jQuery/CSS3实现小鸟飞翔动画
04-16
解压密码：RJ4587 这是一个基于jQuery和CSS3的小鸟飞翔动画，动画的实现原理并不难，准备8张小鸟飞翔时的图片，然后利用jQuery让8张图片循环播放，形成简单的小鸟飞翔动画特效。之前也分享过一款基于HTML5的卡通小鸟...
jQuery CSS3小鸟飞翔动画代码.zip
07-11
jQuery CSS3小鸟飞翔动画特效是一款利用css3的keyframes属性制作的小鸟飞翔动画代码。 js代码 [removed] var timer = setInterval(function(){ $(".box > div").animate({ 'marginLeft': 1000, },{queue:...
纯css会飞的小鸟
08-24
纯css3制作的动画特效
CSS3卡通小鸟头像旋转动画特效.zip
07-03
CSS3卡通小鸟头像旋转动画特效是一款基于css3 transform属性实现的鼠标悬停小鸟头像切换特效。
纯css3制作煽动翅膀的蝴蝶的示例
12-30
纯css3制作煽动翅膀的蝴蝶，先看效果 怎么样，效果还不错吧 上代码： html <div id=butterfly> <div class=leftSide></div> <div class=body></div> <div class=rightSide></div> </div> css body{ background: url(./images/bg.jpg) no-repeat; } #butterfly{ width: 600px;
【战场小包】【CSS】CSS实现一只自由飞翔的鸟儿
南方者的博客
07-11 215
本文使用css实现一只飞翔的鸟儿🐤。阅读本文🍔: 你可以学习使用border实现简单图形、transform和animation知识以及收获一只可爱的飞鸟。我是一只小小小小鸟，🐤🐥🐥🐤
纯CSS实现飞翔的小鸟【附整体代码】
青9的blog
12-06 741
学习本文，你可以学习到以下知识????: border 绘制简单几何图形 transform 与 animation 知识 收获一只可爱的飞鸟
CSS 的快乐：画一个可爱的三只小鸟 Button
sybh的博客
11-28 2349
我们通过纯 CSS 实现了一个可爱的 Button，核心就是用元素 + 伪元素通过 flex + 定位来布局，然后通过 border-radius + clip-path 设置形状，通过 animation + @keyframes 来做复杂的动画，通过 transition 设置过渡效果。border-radius 可以设置 4 个角的横竖半轴的长度，从而做出很多形状，更复杂的不规则形状可以通过 clip-path 来裁剪出来。
JavaScript小鸟起飞案例
lzh17538073353的博客
09-03 516
实现步骤：1、点击按钮 改变img的left值 2、left值 = 在当前left值的基础上 + 10 3、开启定时器 自动移动图片位置
动画效果-飞翔的小鸟
qq_37049128的博客
07-22 272
<DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .bird{position:absolute;left:0;width:200px} </style> <script> /* 匀速运动 * 速度保持不变的运动 飞翔小鸟： * 不断改变l.
程序员的中秋节
楠黎倾风的博客
08-23 7093
中秋节
css动画实现background-image图片渐显渐隐
最新发布
04-22
要实现background-image图片渐显渐隐动画，可以通过CSS3的transition和opacity属性来实现。具体实现步骤如下： 1. 首先，需要将要渐显渐隐的图片设置为HTML元素的背景图，例如： ``` <div class="image"></div> ``` ``` .image { background-image: url('path/to/image.jpg'); width: 500px; height: 300px; } ``` 2. 接着，使用CSS3的transition属性来定义背景图的渐变效果，例如： ``` .image { background-image: url('path/to/image.jpg'); width: 500px; height: 300px; transition: opacity 0.5s ease-in-out; } ``` 其中，transition属性用于指定CSS属性及其过渡效果的持续时间、过渡方式和延时时间，这里指定了opacity属性在0.5秒内进行渐变，渐变方式为ease-in-out。 3. 最后，在需要触发图片渐变效果的事件中，使用opacity属性来控制图片的透明度，例如： ``` .image { background-image: url('path/to/image.jpg'); width: 500px; height: 300px; transition: opacity 0.5s ease-in-out; opacity: 0; /* 初始状态为透明 */ } .image:hover { opacity: 1; /* 鼠标悬浮时逐渐显示 */ } ``` 这里假设需要在鼠标悬浮时触发背景图的渐显渐隐效果，因此在原始状态下将图片的opacity属性设置为0，即完全透明。当鼠标悬浮在图片上时，通过:hover伪类将opacity属性设置为1，背景图将逐渐显示出来，实现渐显渐隐效果。 以上就是通过CSS3实现background-image图片渐显渐隐动画的方法，希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值