使用Html5实现树叶飘落的效果


本文摘自PHP中文网,作者迷茫,侵删。

实现如图所示的东西效果(落叶下落):

000.jpg

html代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

    <title>HTML5树叶飘落动画</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=500px, initial-scale=0.64">

    <link rel="stylesheet" href="leaves.css" type="text/css">

    <script src="leaves.js" type="text/javascript"></script>

</head>

<body>

    <div id="container">

        <div id="leafContainer"></div>

        <div id="message">

            <em>这是基于webkit的落叶动画</em>

        </div>

    </div

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

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

body{

    background-color: #4E4226;

}#container {

    position: relative;

    height: 700px;

    width: 500px;

    margin: 10px auto;

    overflow: hidden;

    border: 4px solid #5C090A;

    background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left;

}#leafContainer {

    position: absolute;

    width: 100%;

    height: 100%;

}#message{

    position: absolute;

    top: 160px;

    width: 100%;

    height: 300px;

    background:transparent url('images/textBackground.png') repeat-x center;

    color: #5C090A;

    font-size: 220%;

    font-family: 'Georgia';

    text-align: center;

    padding: 20px 10px;

    -webkit-box-sizing: border-box;

    -webkit-background-size: 100% 100%;

    z-index: 1;

}em {

    font-weight: bold;

    font-style: normal;

}#leafContainer > p {

    position: absolute;

    width: 100px;

    height: 100px;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-direction: normal;

    -webkit-animation-timing-function: linear;

}#leafContainer > p > img {

     position: absolute;

     width: 100px;

     height: 100px;

     -webkit-animation-iteration-count: infinite;

     -webkit-animation-direction: alternate;

     -webkit-animation-timing-function: ease-in-out;

     -webkit-transform-origin: 50% -100%;

}@-webkit-keyframes fade{

    0%   { opacity: 1; }

    95%  { opacity: 1; }

    100% { opacity: 0; }}

 

@-webkit-keyframes drop{

    0%   { -webkit-transform: translate(0px, -50px); }

    100% { -webkit-transform: translate(0px, 650px); }}

 

@-webkit-keyframes clockwiseSpin{

    0%   { -webkit-transform: rotate(-50deg); }

    100% { -webkit-transform: rotate(50deg); }}

 

 

@-webkit-keyframes counterclockwiseSpinAndFlip

{

    0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }

    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }}

js代码:

阅读剩余部分

相关阅读 >>

HTML5中在元素滚动条在滚动时触发的事件onscroll

HTML5中如何使用rel属性的预加载功能?

HTML5和app的区别是什么

HTML5实现app中监听返回事件如何处理

秀野堂HTML5入门视频教程的资源推荐

h5元素/属性/格式化的详细介绍

HTML5 高级教程之web storage

HTML5中返回当前音频/视频的url的属性currentsrc

HTML5编码怎么设置

HTML5的触摸事件

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




打赏

取消

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

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

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

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

评论

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

    暂无评论...