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


Posted in HTML / CSS onDecember 16, 2012

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

这里需要强调的一点是,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>
<div id="logo">
<div class="frame">
<img src="img/muybridge12-hp-v.png"/>
</div>
<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>
<div class="horse"></div>
<div class="horse"></div>
<div class="horse"></div>
</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>
<title></title>
<link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/>
</head>
<body>
<div id="logo">
<div class="frame">
<img src="img/muybridge12-hp-v.png"/>
</div>
<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>
<div class="horse"></div>
<div class="horse"></div>
<div class="horse"></div>
</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下载地址:http://xiazai.3water.com/201212/yuanma/googlecss3_3water.rar

HTML / CSS 相关文章推荐
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 #HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 #HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 #HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 #HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 #HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 #HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 #HTML / CSS
You might like
php学习之function的用法
2012/07/14 PHP
yii的CURD操作实例详解
2014/12/04 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
摘自启点的main.js
2008/04/20 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
几行js代码实现自适应
2017/02/24 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
Python列表append和+的区别浅析
2015/02/02 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
Python文件操作基本流程代码实例
2017/12/11 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
Python中按键来获取指定的值
2019/03/02 Python
python实现简易学生信息管理系统
2020/04/05 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
django rest framework 自定义返回方式
2020/07/12 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
会计自我鉴定
2013/11/02 职场文书
银行求职信范文
2014/05/26 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
材料物理专业求职信
2014/09/01 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书