HTML5实践-使用css3如何完成google涂鸦动画的详解

百变鹏仔 2个月前 (10-18) #H5教程

文章标签详解

今天我们将介绍，如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来，

这里需要强调的一点是，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><p id="logo">    <p class="frame">        <img  src="img/muybridge12-hp-v.png"/ alt="HTML5实践-使用css3如何完成google涂鸦动画的详解" >    </p>    <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"/ alt="HTML5实践-使用css3如何完成google涂鸦动画的详解" >    </span>    <p class="horse"></p>    <p class="horse"></p>    <p class="horse"></p></p></body></html>

下面是部分css。

*{margin:0px;padding:0px;}#logo{position: relative;}.horse{    width:469px;    height:54px;    background: url(&#39;../img/muybridge12-hp-f.jpg&#39;);}.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代码完成的页面效果。

下面我们来介绍如何产生动画效果。我们首先需要定义关键帧，他规定动画在不同阶段的效果。大家可以通过http://www.w3schools.com/css3/css3_animations.asp 了解更多信息。

我们创建了一个名为horse-ride的关键帧，针对chrome和firefox需要在前面添加-webkit-或者是-moz-前缀。0%和100%分别代码开始和结束，可以根据需要增加新的case，比如50%时的动画效果。

@-webkit-keyframes horse-ride {    0% {background-position: 0 0;}    100% {background-position: -804px 0;}}@-moz-keyframes horse-ride {    0% {background-position: 0 0;}    100% {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;}

文章推荐

HTML5实践-使用css3如何完成google涂鸦动画的详解

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集