<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

            body{

                background-color: skyblue

            }

            .cloud{

                width: 200px;

                height: 200px;

                position: relative;

                margin-top: 50px;

                margin-left: 100%;

                animation: piao 5000ms linear infinite;

            }

            .cloud li{

                list-style: none;

                width: 50px;

                height: 50px;

                background: #fff;

                -webkit-border-radius: 25px;

                -moz-border-radius: 25px;

                border-radius: 25px;

                position: absolute;

                top: 0;

                left: 0;

            }

            .cloud li:first-child{

                top: 5px;

                left: -20px;

            }

            .cloud li:nth-child(2){

                top: 25px;

                left: -40px;

            }

            .cloud li:nth-child(3){

                top: 5px;

                left: 20px;

            }

            .cloud li:nth-child(4){

                top: 25px;

                left: 40px;

            }

            .cloud li:nth-child(5){

                top: 25px;

                left: 0;

            }

            .cloud li:nth-child(6){

                top: 25px;

                left: -15px;

            }

            .cloud li:nth-child(7){

                top: 25px;

                left: 15px;

            }

            .bird{

                width: 200px;

                height: 200px;

                margin: 0 auto;

                /*border: 1px solid #fff;*/

                position: relative;

            }

            .main{

                position: absolute;

                top: 50px;

                left: 50px;

                width: 100px;

                height: 100px;

                background: #fab;

                -webkit-border-radius: 20px;

                -moz-border-radius: 20px;

                border-radius: 20px;

            }

            .tail{

                position: absolute;

                top: 80px;

                left: 30px;

                border-top: 20px solid #fde;

                border-bottom: 20px solid transparent;

                border-right: 20px solid transparent;

                border-left: 20px solid transparent;

            }

            .eyes{

                position: absolute;

                top: 10px;

                right: 10px;

                width: 40px;

                height: 40px;

                background: #fff;

                border: 2px solid #000;

                -webkit-border-radius: 25px;

                -moz-border-radius: 25px;

                border-radius: 25px;

            }

            .eye{

                position: absolute;

                top: 5px;

                right: 2px;

                border: 5px solid #000;

                width: 10px;

                height: 10px;

                background: #fff;

                -webkit-border-radius: 15px;

                -moz-border-radius: 15px;

                border-radius: 15px;

            }

            .mouth{

                top: 70px;

                left: 150px;

                position: absolute;

                border-top: 20px solid transparent;

                border-bottom: 20px solid  transparent;

                border-left: 20px solid #fda;

                border-right: 20px solid  transparent;

            }

            .line{

                position: absolute;

                height: 1px;

                background: #ccc;

                width: 20px;

                top: 90px;

                left: 150px;

            }

            .swing{

                position: absolute;

                border-bottom: 20px solid transparent;

                border-top: 20px solid #fdd;

                border-left: 20px solid #fdd;

                border-right: 20px solid transparent;

                top:120px;

                left: 70px;

                transform-origin: top;

                animation: swing 600ms linear infinite;

            }

            @keyframes swing{

                50%{

                    -webkit-transform: rotateX(180deg);

                    -moz-transform: rotateX(180deg);

                    -ms-transform: rotateX(180deg);

                    -o-transform: rotateX(180deg);

                    transform: rotateX(180deg);

                }

            }

            @keyframes piao{

                100%{

                    -webkit-transform: translateX(-1200%);

                    -moz-transform: translateX(-1200%);

                    -ms-transform: translateX(-1200%);

                    -o-transform: translateX(-1200%);

                    transform: translateX(-1200%);

                }

            }

        </style>

    </head>

    <body>

        <div class="cloud">

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

        <div class="bird">

            <div class="tail">

            </div>

            <div class="main">

                <div class="eyes">

                    <div class="eye"></div>

                </div>

            </div>

            <div class="swing">

            </div>

            <div class="mouth">

            </div>

            <p class="line"></p>

        </div>

    </body>

</html>

纯CSS3和HTML5

demo_05HTML5+CSS3绘制小鸟的更多相关文章

  1. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

  2. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  3. css3绘制几何图形

    用css3绘制你需要的几何图形 1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class=&q ...

  4. 用纯CSS3绘制萌系漫画人物动态头像

    大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...

  5. css3绘制腾讯logo

    CSS3绘制的腾讯LOGO,下边是对比图. 演示地址

  6. 【项目1-1】使用HTML5+CSS3绘制HTML5的logo

    作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...

  7. CSS3绘制砖墙-没实用不论什么图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 使用 CSS3 绘制 Hello Kitty

    偶然间看到了 SegmentFault 上的一篇文章,感觉这个 Hello Kitty 画的还不错,心血来潮也用 CSS3 画了个 Hello Kitty,现在在这里记录一下详细的绘制过程.想要源码. ...

  9. 详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧

    1.矩形 绘制矩形应该是最简单的了,直接设置div的宽和高,填充颜色,效果就出来了. 2.圆角矩形 绘制圆角矩形也很简单,在1的基础上,在使用css3的border-radius,即可. 3.圆 根据 ...

随机推荐

  1. html自定义checkbox、radio、select —— checkbox、radio篇

    前些日子,所在公司项目的UI做了大改,前端全部改用 Bootstrap 框架,Bootstrap的优缺点在此就不详述了,网上一大堆相关资料. 前端的设计就交给我和另一个同事[LV,大学同班同学,毕业后 ...

  2. 【ImageMagick】ImageMagick命令行工具

    [关于ImageMagick] [命令行工具] [源码安装] [二进位发布版本] [资源配置文件] [相关下载] ImageMagick命令行工具 [ convert | identify | mog ...

  3. fiddler 抓包post请求body参数在jmeter中的书写

    jmeter请求一直报错,最后查出来是请求参数的格式写错了,醉了 记录一下,以防我再次健忘 fidder抓包显示详情 jmeter 请求body data参数书写直接复制fiddler里TextVie ...

  4. SQLServer加入域后无法远程连接

    如果您更改的SQLServer的远程连接端口(默认1433),加入域后,防火墙会把自定义规则都禁用掉 所以,你得进防火墙,查看,是否防火墙关闭了,我的就是关闭了,找了半天原因

  5. ActiveForm

    ActiveForm要和Model一起使用 我想在你的控制器的action中,至少应该这么写: /*action*/ $model = new Comments(); //实例化 Comments m ...

  6. Navicat远程连接MySQL数据库

    1.打开Navicat,在界面的“主机名和IP地址”处输入IP地址,一般是192.168.1.1 2.输入相应的用户名和密码,点击连接测试,确认是否已经连接,之后就可以点击确定了 3.找到相应的数据库 ...

  7. LINUX下解决netstat查看TIME_WAIT状态过多问题

     来源:多3度热爱 的BLOG   查看连接某服务端口最多的的IP地址 netstat -nat |awk '{print $5}'|awk -F: '{print $1}'|sort|uniq -c ...

  8. Java_Web 连接池

    对于共享资源,有一个很著名的设计模式:资源池(Resource Pool).该模式正是为了解决资源的频繁分配﹑释放所造成的问题.为解决我们的问题,可以采用数据库连接池技术.数据库连接池的基本思想就是为 ...

  9. JAVA-应用easyui

    easyui下载地址:http://www.jeasyui.com/index.php 现在还easyui之后将其解压,解压之后将文件夹中的文件除了demo文件夹之外的文件放入到Eclipse的web ...

  10. (linux shell)第一章--小试牛刀(上)

    来源:(linux shell)第一章--小试牛刀(上) 从今天開始,我们一起来学习<linux shell脚本攻略>这本书. 1.1简单介绍 shell脚本一般是一个以#!起始的文本文件 ...