HTML5实践 -- 如何使用css3完成google涂鸦动画-阿里云开发者社区

开发者社区> bill.kang> 正文

HTML5实践 -- 如何使用css3完成google涂鸦动画

简介:   今天我们将介绍,如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后,页面中的骑手和马匹将会运动起来,http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。
+关注继续查看

  今天我们将介绍,如何使用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代码完成的页面效果。

 

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

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

@-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的动画效果。

#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

 

  原文地址:http://cssdeck.com/labs/google-doodle-for-eadweard-j-muybridges-182nd-birthday

adpics.aspx?source=kbh1983&sourcesuninfo

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何使用Terraform管理容器服务Kubernetes集群之--Serverless集群
#### 介绍 Terraform 是一款 Infrastructure as Code 的工具,可以将云端资源代码化。关于 Terraform 的基本介绍本文不再赘述,有兴趣的同学可以参考 [《云生态下的基础架构资源管理利器Terraform》](https://yq.aliyun.com/articles/215592) 等云栖社区的优秀文章。
1297 0
【CSS】使用CSS控制文字过多自动省略号
使用CSS可以设置一下样式: u,small{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -...
1006 0
如何在ui5 xml view中使用嵌入的自定义css style
Created by Jerry Wang, last modified on Sep 09, 2015
18 0
由Google搜索页引发对box-shadow的使用和技巧总结
CSS3的box-shadow有点类似于text-shadow,只不过不同的是text-shadow是对象的文本设置阴影,而box-shadow是给对象实现图层阴影效果。(本文我们搁下IE不谈,只谈谈box-shadow的具体使用方法)
1237 0
+关注
bill.kang
从事软件研发十余年,入行前端开发六年有余,对前端工程化有一定认识。 现就职于客如云科技有限公司,任前端技术经理一职。
109
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载