如何使用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中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
Terran历史背景
2020/03/14 星际争霸
php采集时被封ip的解决方法
2010/08/29 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
Prototype Template对象 学习
2009/07/19 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
python爬取哈尔滨天气信息
2018/07/14 Python
python urllib爬虫模块使用解析
2019/09/05 Python
如何对python的字典进行排序
2020/06/19 Python
Python collections模块的使用方法
2020/10/09 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
学生学习总结的自我评价
2013/10/22 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
党员创先争优活动总结
2014/05/04 职场文书
财务负责人任命书
2014/06/06 职场文书
2014年质量工作总结
2014/11/22 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
小学作文之描写天气
2019/08/15 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Ajax异步刷新功能及简单案例
2021/11/20 Javascript