如何使用html5与css3完成google涂鸦动画

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作

来源：阅读：1152 次日期：2016-08-01 16:00:39

温馨提示：小编为您整理了“如何使用html5与css3完成google涂鸦动画”,方便广大网友查阅！

如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来,需要的朋友可以了解下

我们先来看html代码。

代码如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</span>

</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>

</head>

<body>

</div>

</span>

</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;

}

下面是上述html和css代码完成的页面效果。

pic

代码如下:

@-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的兄弟节点。

最后我们为【开始】按钮添加动画效果。

代码如下:

#play_button:checked ~#play_image img{

left:-68px;

-webkit-transition: all 0.5s ease-in;

-moz-transition: all 0.5s ease-in;

}

上一篇：HTML5重塑Web世界它将如何改变互联网

下一篇：HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题

手机网站地址：如何使用html5与css3完成google涂鸦动画

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！