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


本文摘自PHP中文网,作者黄舟,侵删。

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

  这里需要强调的一点是,ie不支持css3的动画属性,再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。

  我们先来看html代码。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/>

</head>

<body>

<p id="logo">

    <p class="frame">

        <img src="img/muybridge12-hp-v.png"/>

    </p>

    <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>

    <p class="horse"></p>

    <p class="horse"></p>

    <p class="horse"></p>

</p>

</body>

</html>

  下面是部分css。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

*{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%时的动画效果。

1

2

3

4

5

6

7

8

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

1

2

3

4

5

6

7

8

9

#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集合起来,设置背景的过渡动画。

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

1

2

3

4

5

#play_button:checked ~#play_image img{

    left:-68px;

    -webkit-transition: all 0.5s ease-in;

    -moz-transition: all 0.5s ease-in;

}

以上就是HTML5实践-使用css3如何完成google涂鸦动画的详解的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

详解h5非常重要的28个新特性,新技巧和新技术

h5和c3怎样做出太阳系行星运转的动画效果

h5实现拖拉上传文件

几个解决兼容ie6\7\8不支持HTML5标签的几个方法

HTML5是啥

html中header定义什么意思

利用HTML5以及canvas实现支持签名插件的方法

关于HTML5中的localstorage详细介绍(图)

h5链接的使用

HTML5 webworkers防止浏览器假死的示例代码分享

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...