本文摘自PHP中文网,作者黄舟,侵删。
今天我们将介绍,如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后,页面中的骑手和马匹将会运动起来, 这里需要强调的一点是,ie不支持css3的动画属性,再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。
我们先来看html代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | *{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://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/194/b73d3c7e348ab091665706b474f09834-0.png)
下面我们来介绍如何产生动画效果。我们首先需要定义关键帧,他规定动画在不同阶段的效果。大家可以通过http://www.w3schools.com/css3/css3_animations.asp 了解更多信息。
我们创建了一个名为horse-ride的关键帧,针对chrome和firefox需要在前面添加-webkit-或者是-moz-前缀。0%和100%分别代码开始和结束,可以根据需要增加新的case,比如50%时的动画效果。
1 2 3 4 5 6 7 8 | @-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的动画效果。
1 2 3 4 5 6 7 8 9 | #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集合起来,设置背景的过渡动画。
最后我们为【开始】按钮添加动画效果。
1 2 3 4 5 | #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涂鸦动画的详解的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5如何正确设置视频的宽高
总结HTML5中新表单元素的使用方法及实例教程
让ie支持HTML5的方法
HTML5存储方式小结
h5的web本地存储如何使用
HTML5实践-灰色图片画廊实现的方法
HTML5 canvas画布详解(一)
HTML5讲解之拖拽事件dragstart、drag和dragend
css3支持为网页添加多个背景图片吗
HTML5返回一个mediaerror对象的属性error
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5实践-使用css3如何完成google涂鸦动画的详解