网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 如何使用html5与css3完成google涂鸦动画
内容
    如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来,需要的朋友可以了解下
    我们先来看html代码。
    代码如下:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/>
    </head>
    <body>
    <div id="logo">
    <div>
    <img src="img/muybridge12-hp-v.png"/>
    </div>
    <label for="play_button" id="play_label"></label>
    <input type="checkbox" id="play_button" name="play_button"/>
    <span id="play_image">
    <img src="img/muybridge12-hp-p.jpg"/>
    </span>
    <div></div>
    <div></div>
    <div></div>
    </div>
    </body>
    </html>
    下面是部分css。
    代码如下:
    *{margin:0px;padding:0px;}
    #logo{position: relative;}
    .horse{
    width:469px;
    height:54px;
    background: url('../img/muybridge12-hp-f.jpg');
    }
    .frame{position:absolute;left:0;top:0;z-index: 1;}
    #play_button{display: none;}
    #play_label{
    width:67px;
    height:54px;
    display:block;
    position: absolute;
    left:201px;
    top:54px;
    z-index: 2;
    }
    #play_image{
    position: absolute;
    left:201px;
    top:54px;
    z-index: 0;
    overflow: hidden;
    width: 68px;
    height: 55px;
    }
    #play_image img{
    position: absolute;
    left: 0;
    top: 0;
    }
    这部分代码没太大难度，我就不做详细讲解了。css基础不是很扎实的读者，也许会疑惑【开始】按钮是如何实现定位的。可以自行阅读position属性，了解absolute具体作用。
    下面是上述html和css代码完成的页面效果。
    pic
    下面我们来介绍如何产生动画效果。我们首先需要定义关键帧，他规定动画在不同阶段的效果。大家可以通过http://www.w3schools.com/css3/css3_animations.asp 了解更多信息。
    我们创建了一个名为horse-ride的关键帧，针对chrome和firefox需要在前面添加-webkit-或者是-moz-前缀。0%和100%分别代码开始和结束，可以根据需要增加新的case，比如50%时的动画效果。
    代码如下:
    @-webkit-keyframes horse-ride {
    % {background-position: 0 0;}
    % {background-position: -804px 0;}
    }
    @-moz-keyframes horse-ride {
    % {background-position: 0 0;}
    % {background-position: -804px 0;}
    }
    下面，我们来为horse添加css3的动画效果。
    代码如下:
    #play_button:checked ~.horse{
    -webkit-animation:horse-ride 0.5s steps(12,end) infinite;
    -webkit-animation-delay:2.5s;
    -moz-animation:horse-ride 0.5s steps(12,end) infinite;
    -moz-animation-delay:2.5s;
    background-position: -2412px 0;
    -webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
    -moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    这里首先介绍:checked和~，:checked是伪类，指当#play_button选中时的css效果，~指的是#play_button的兄弟节点。
    接下来介绍.horse相关的css属性。animation中我们使用了4个值，依次代表：关键帧（我们上面定义的horse-ride），动画间隔时间，动画效果和执行次数。之后我们又通过animation-delay设置动画延迟时间。通过transition和background-position集合起来，设置背景的过渡动画。
    最后我们为【开始】按钮添加动画效果。
    代码如下:
    #play_button:checked ~#play_image img{
    left:-68px;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    }
    大家可以自己动手尝试开发了。
    demo下载地址：google-doodle-animation-in-css3-without-javascript.zip今天我们将介绍，如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来，http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。
    这里需要强调的一点是，ie不支持css3的动画属性，再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。
    我们先来看html代码。
    代码如下:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/>
    </head>
    <body>
    <div id="logo">
    <div>
    <img src="img/muybridge12-hp-v.png"/>
    </div>
    <label for="play_button" id="play_label"></label>
    <input type="checkbox" id="play_button" name="play_button"/>
    <span id="play_image">
    <img src="img/muybridge12-hp-p.jpg"/>
    </span>
    <div></div>
    <div></div>
    <div></div>
    </div>
    </body>
    </html>
    下面是部分css。
    代码如下:
    *{margin:0px;padding:0px;}
    #logo{position: relative;}
    .horse{
    width:469px;
    height:54px;
    background: url('../img/muybridge12-hp-f.jpg');
    }
    .frame{position:absolute;left:0;top:0;z-index: 1;}
    #play_button{display: none;}
    #play_label{
    width:67px;
    height:54px;
    display:block;
    position: absolute;
    left:201px;
    top:54px;
    z-index: 2;
    }
    #play_image{
    position: absolute;
    left:201px;
    top:54px;
    z-index: 0;
    overflow: hidden;
    width: 68px;
    height: 55px;
    }
    #play_image img{
    position: absolute;
    left: 0;
    top: 0;
    }
    这部分代码没太大难度，我就不做详细讲解了。css基础不是很扎实的读者，也许会疑惑【开始】按钮是如何实现定位的。可以自行阅读position属性，了解absolute具体作用。
    下面是上述html和css代码完成的页面效果。
    pic
    下面我们来介绍如何产生动画效果。我们首先需要定义关键帧，他规定动画在不同阶段的效果。大家可以通过http://www.w3schools.com/css3/css3_animations.asp 了解更多信息。
    我们创建了一个名为horse-ride的关键帧，针对chrome和firefox需要在前面添加-webkit-或者是-moz-前缀。0%和100%分别代码开始和结束，可以根据需要增加新的case，比如50%时的动画效果。
    代码如下:
    @-webkit-keyframes horse-ride {
    % {background-position: 0 0;}
    % {background-position: -804px 0;}
    }
    @-moz-keyframes horse-ride {
    % {background-position: 0 0;}
    % {background-position: -804px 0;}
    }
    下面，我们来为horse添加css3的动画效果。
    代码如下:
    #play_button:checked ~.horse{
    -webkit-animation:horse-ride 0.5s steps(12,end) infinite;
    -webkit-animation-delay:2.5s;
    -moz-animation:horse-ride 0.5s steps(12,end) infinite;
    -moz-animation-delay:2.5s;
    background-position: -2412px 0;
    -webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
    -moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    这里首先介绍:checked和~，:checked是伪类，指当#play_button选中时的css效果，~指的是#play_button的兄弟节点。
    接下来介绍.horse相关的css属性。animation中我们使用了4个值，依次代表：关键帧（我们上面定义的horse-ride），动画间隔时间，动画效果和执行次数。之后我们又通过animation-delay设置动画延迟时间。通过transition和background-position集合起来，设置背景的过渡动画。
    最后我们为【开始】按钮添加动画效果。
    代码如下:
    #play_button:checked ~#play_image img{
    left:-68px;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    }
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/16 5:36:45