CSS3实现动画-飞翔的小鸟

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>




  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现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、付费专栏及课程。

余额充值