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

今天我们将介绍，如何使用css 3完成google涂鸦动画。当您点击demo页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来，http：//demo.mb5u.com/js/2012 / google CSS3 /“> css3 /

　　这里需要精选的一点是，即不支持css3的动画属性，再次重复下万恶的ie。但是我们不能逐步为理由不去拥抱css3。

　　我们先来看html代码。

复制代码代码如下：

<！DOCTYPE html>

<html>

<head>

</ head>

<body>

</ div>

<标签为=“ play_button” id =“ play_label”> </ label>

<输入类型=“复选框” id =“ play_button”名称=“ play_button” />

</ span>

</ div>

</ body>

</ html>

下面是部分css。

复制代码代码如下：

* {margin：0px; padding：0px;}

#logo {position：relative;}

.horse {

width：469px;

高度：54像素；

背景：url（'../ img / muybridge12-hp-f.jpg'）;

}

.frame {position：absolute; left：0; top：0; z-index：1;}

#play_button {display：none;}

#play_label {

width：67px;

高度：54像素；

显示：块;

位置：绝对；

左：201px;

上：54px;

z索引：2；

}

#play_image {

位置：绝对；

左：201px;

上：54px;

z索引：0；

溢出：隐藏；

宽度：68像素；

高度：55px；

}

#play_image img {

位置：绝对；

左：0；

最高：0;

}

这部分代码没太大缺点，我就不做详细讲解了。css基础不是很扎实的读者，也许会疑惑【开始】按钮是如何实现定位的。可以自行阅读位置属性，了解绝对的具体作用。

　　下面是上述HTML和CSS代码完成的页面效果。

PIC

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

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

复制代码代码如下：

@ -webkit-keyframes骑马{

％{背景位置：0 0;}

％{背景位置：-804px 0;}

}

@ -moz-keyframes骑马{

％{背景位置：0 0;}

％{background-position：-804px 0;}

}

下面，我们来为马添加css3的动画效果。

复制代码代码如下：

#play_button：checked〜.horse {

-webkit-animation：horse-ride 0.5s ste ps（12，end）infinite;

-webkit-animation-delay：2.5s;

-moz动画：骑马0.5s无限步（12，end）;

-moz动画延迟：2.5秒；

背景位置：-2412px 0；

-webkit-transition：所有2.5s立方贝塞尔曲线（0.550，0.055，0.675，0.190）;

-moz-transition：所有2.5s立方贝塞尔曲线（0.550，0.055，0.675，0.190）;

}

这里首先介绍：checked和〜，：checked是伪类，指当#play_button出现时的css效果，〜指的是#play_button的兄弟姐妹。

　　接下来介绍.horse相关的css属性。animation中我们使用了4一个值，依次代表：关键帧（我们上面定义的horse-ride），动画间隔时间，动画效果和执行次数。之后我们又通过animation-delay设置动画延迟时间。通过过渡和背景位置集合起来，设置背景的过渡动画。

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

复制代码代码如下：

#play_button：已选中〜＃play_image img {

左：-68px;

-webkit-transition：所有0.5s缓解；

-moz-transition：所有0.5s缓解；

}

大家可以自己动手尝试开发了。

　　演示下载地址：google-doodle-animation-in-css3-without-javascript.zip今天我们将介绍，如何使用CSS3完成谷歌涂鸦动画当你点击演示页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来，HTTP：//www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html

　　这里需要强调的一点是，即不支持css3的动画属性，再次重复下万恶的ie。但是我们不能跟随为理由不去拥抱css3。

　　我们先来看html代码。

复制代码代码如下：

<！DOCTYPE html>

<html>

<head>

</ head>

<body>

</ div>

<标签为=“ play_button” id =“ play_label”> </ label>

<输入类型=“复选框” id =“ play_button”名称=“ play_button” />

</ span>

</ div>

</ body>

</ html>

下面是部分css。

复制代码代码如下：

* {margin：0px; padding：0px;}

#logo {position：relative;}

.horse {

width：469px;

高度：54像素；

背景：url（'../ img / muybridge12-hp-f.jpg'）;

}

.frame {position：absolute; left：0; top：0; z-index：1;}

#play_button {display：none;}

#play_label {

width：67px;

高度：54像素；

显示：块;

位置：绝对；

左：201px;

上：54px;

z索引：2；

}

#play_image {

位置：绝对；

左：201px;

上：54px;

z索引：0；

溢出：隐藏；

宽度：68像素；

高度：55px；

}

#play_image img {

位置：绝对；

左：0；

最高：0;

}

　　下面是上述HTML和CSS代码完成的页面效果。

PIC

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

　　我们创建了一个名为马骑的关键帧，针对铬和Firefox的需要在前面添加-webkit-或者是-moz-前缀0.0％和100％分别代码开始和结束，可以根据需要增加新的案例，大约50％时的动画效果。

复制代码代码如下：

@ -webkit-keyframes骑马{

％{背景位置：0 0;}

％{背景位置：-804px 0;}

}

@ -moz-keyframes骑马{

％{背景位置：0 0;}

％{background-position：-804px 0;}

}

下面，我们来为马添加css3的动画效果。

复制代码代码如下：

#play_button：选中〜.horse {

-webkit-animation：horse-ride 0.5s steps（12，end）infinite;

-webkit-animation-delay：2.5s;

-moz动画：骑马0.5s无限步（12，end）;

-moz动画延迟：2.5秒；

背景位置：-2412px 0；

-webkit-transition：所有2.5s立方贝塞尔曲线（0.550，0.055，0.675，0.190）;

-moz-transition：所有2.5s立方贝塞尔曲线（0.550，0.055，0.675，0.190）;

}

这里首先介绍：checked和〜，：checked是伪类，指当#play_button出现时的css效果，〜指的是#play_button的兄弟姐妹。

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

复制代码代码如下：

#play_button：已选中〜＃play_image img {

左：-68px;

-webkit-transition：所有0.5s缓解；

-moz-transition：所有0.5s缓解；

}

大家可以自己动手尝试开发了。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h61435.shtml