<div class="leftDoor"></div>
<div class="rightDoor"></div>
2然后写好大门的css，
div{
margin:0
padding:0
}
.door{
width:450px
height:450px
position:relative
background:#a1a1a1
}
.door .leftDoor,.door .rightDoor{
position:absolute
width:224px
height:400px
top:57px
top:50px
background:#d1d1d1
}
.door .leftDoor{
left:0
border-right:1px solid #999
box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1)
}
.door .rightDoor{
right:0
border-left:1px solid #999
transform-origin: 100% 40%
}
先为左边的门添加动画
@-webkit-keyframes leftDoor {
0%,100% {
-webkit-transform-origin: 0% 40%
}
0{
-webkit-transform:perspective(0) rotateY(0)
}
100% {
-webkit-transform:perspective(600px) rotateY(70deg)
}
}
}
@keyframes leftDoor {
0%,100% {
transform-origin: 0% 40%
}
0{
transform:perspective(0) rotateY(0)
}
100% {
transform:perspective(600px) rotateY(70deg)
}
}
然后为右边的门添加css3动画，由于左右门对称，只要变化相应的地方就行了
@-webkit-keyframes rightDoor {
0%,100% {
-webkit-transform-origin: 100% 40%
}
100% {
-o-transform:perspective(600px) rotateY(-70deg)
}
}
@keyframes rightDoor {
0%,100% {
transform-origin: 100% 40%
}
0{
transform:perspective(0) rotateY(0)
}
100% {
transform:perspective(600px) rotateY(-70deg)
}
}
5这里的动画主要用到的是rotate和perspective
6如果想要动画点击后才开门，可以加入一个按钮，然后js控制
方法/步骤首先，先在<body></body>中加入门
然后写好大门的css，如下：[由于本人设计不好，所以这里的门都是用颜色块代替的，大家在用的时候可以换成各种门的背景]
div{
margin:0
padding:0
}
.door{
width:450px
height:450px
position:relative
background:#a1a1a1
}
.door .leftDoor,.door .rightDoor{
position:absolute
width:224px
height:400px
top:57px
top:50px
background:#d1d1d1
}
.door .leftDoor{
left:0
border-right:1px solid #999
box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1)
-webkit-animation:leftDoor 5s 1
-moz-animation:leftDoor 5s 1
-o-animation:leftDoor 5s 1
animation:leftDoor 5s 1
-webkit-transform-origin: 0% 40%
-moz-transform-origin: 0% 40%
-o-transform-origin: 0% 40%
transform-origin: 0% 40%
}
.door .rightDoor{
right:0
border-left:1px solid #999
box-shadow:inset 2px -2px 10px rgba(0, 0, 0, 0.1)
-webkit-animation:rightDoor 5s 1
-moz-animation:rightDoor 5s 1
-o-animation:rightDoor 5s 1
animation:rightDoor 5s 1
-webkit-transform-origin: 100% 40%
-moz-transform-origin: 100% 40%
-o-transform-origin: 100% 40%
transform-origin: 100% 40%
}
先为左边的门添加动画
@-webkit-keyframes leftDoor {
0%,100% {
-webkit-transform-origin: 0% 40%
}
0{
-webkit-transform:perspective(0) rotateY(0)
}
100% {
-webkit-transform:perspective(600px) rotateY(70deg)
}
}
@-moz-keyframes leftDoor {
0%,100% {
-moz-transform-origin: 0% 40%
}
0{
-moz-transform:perspective(0) rotateY(0)
}
100% {
-moz-transform:perspective(600px) rotateY(70deg)
}
}
@-o-keyframes leftDoor {
0%,100% {
-o-transform-origin: 0% 40%
}
0{
-o-transform:perspective(0) rotateY(0)
}
100% {
-o-transform:perspective(600px) rotateY(70deg)
}
}
@keyframes leftDoor {
0%,100% {
transform-origin: 0% 40%
}
0{
transform:perspective(0) rotateY(0)
}
100% {
transform:perspective(600px) rotateY(70deg)
}
}
然后为右边的门添加css3动画，由于左右门对称，只要变化相应的地方就行了
@-webkit-keyframes rightDoor {
0%,100% {
-webkit-transform-origin: 100% 40%
}
0{
-webkit-transform:perspective(0) rotateY(0)
}
100% {
-webkit-transform:perspective(600px) rotateY(-70deg)
}
}
@-moz-keyframes rightDoor {
0%,100% {
-moz-transform-origin: 100% 40%
}
0{
-moz-transform:perspective(0) rotateY(0)
}
100% {
-moz-transform:perspective(600px) rotateY(-70deg)
}
}
@-o-keyframes rightDoor {
0%,100% {
-o-transform-origin: 100% 40%
}
0{
-o-transform:perspective(0) rotateY(0)
}
100% {
-o-transform:perspective(600px) rotateY(-70deg)
}
}
@keyframes rightDoor {
0%,100% {
transform-origin: 100% 40%
}
0{
transform:perspective(0) rotateY(0)
}
100% {
transform:perspective(600px) rotateY(-70deg)
}
}
5
这里的动画主要用到的是rotate和perspective
6
如果想要动画点击后才开门，可以加入一个按钮，然后js控制
这里需要强调的一点是，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:0pxpadding:0px}
#logo{position: relative}
.horse{
width:469px
height:54px
background: url('../img/muybridge12-hp-f.jpg')
}
.frame{position:absoluteleft:0top:0z-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:0pxpadding:0px}
#logo{position: relative}
.horse{
width:469px
height:54px
background: url('../img/muybridge12-hp-f.jpg')
}
.frame{position:absoluteleft:0top:0z-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
}
大家可以自己动手尝试开发了。
