这里需要强调的一点是,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"/> </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"/> </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('../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代码完成的页面效果。
下面我们来介绍如何产生动画效果。我们首先需要定义关键帧,他规定动画在不同阶段的效果。大家可以通过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涂鸦动画的详解的详细内容,更多请关注php中文网其它相关文章!