HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果

使用HTML5的canvas画的孙悟空，CSS3画的白云飘飘。

效果图：

代码如下：

1. !doctyPE html>   
2. html>   
3. head>   
4. meta charset="utf-8">   
5. meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">   
6. meta name="description" content="">   
7. meta name="viewport" content="width=device-width, inITial-scale=1">   
8. title> HTML5+CSS3实现齐天大圣腾云驾雾/title>   
9. style type="text/css">   
10. * {   
11. margin: 0;   
12. padding: 0;   
13. border: 0;   
14. }   
15. html, body {   
16. margin: 0;   
17. }   
18. @-webkit-keyframes STAR-MOVE {   
19. From {   
20. background-position: 0% 0%;   
21. }   
22. to {   
23. background-position: 600% 0%;   
24. }   
25. }   
26. @keyframes STAR-MOVE {   
27. from {   
28. background-position: 0% 0%;   
29. }   
30. to {   
31. background-position: 600% 0%;   
32. }   
33. }   
34. .wall {   
35. position: absolute;   
36. top: 0;   
37. left: 0;   
38. bottombottom: 0;   
39. rightright: 0;   
40. }   
41. div#background {   
42. background: black url('http://hovertree.COM/texiao/html5/30/img/background.png') repeat-x 5% 0%;   
43. background-size: cover;   
44. -webkit-animation: STAR-MOVE 200s linear infinite;   
45. -moz-animation: STAR-MOVE 200s linear infinite;   
46. -ms-animation: STAR-MOVE 200s linear infinite;   
47. animation: STAR-MOVE 200s linear infinite;   
48. }   
49. div#midground {   
50. background: url('http://hovertree.com/texiao/html5/30/img/midground.png')repeat 20% 0%;   
51. z-index: 1;   
52. -webkit-animation: STAR-MOVE 100s linear infinite;   
53. -moz-animation: STAR-MOVE 100s linear infinite;   
54. -ms-animation: STAR-MOVE 100s linear infinite;   
55. animation: STAR-MOVE 100s linear infinite;   
56. }   
57. div#foreground {   
58. background: url('http://hovertree.com/texiao/html5/30/img/foreground.png')repeat 35% 0%;   
59. z-index: 2;   
60. -webkit-animation: STAR-MOVE 50s linear infinite;   
61. -moz-animation: STAR-MOVE 50s linear infinite;   
62. -ms-animation: STAR-MOVE 50s linear infinite;   
63. animation: STAR-MOVE 50s linear infinite;   
64. } #hovertreewk{ position:absolute; z-index:9999; top:0px; bottombottom:0px; left:0px; rightright:0px; margin:auto; }   
65. /style>   
66. /head>   
67. body>   
68. div style="text-align:center; position:absolute; z-index:9; color:white"> h1> 齐天大圣腾云驾雾/h1> /div>   
69. div id="background" class="wall"> /div>   
70. div id="midground" class="wall"> /div>   
71. div id="foreground" class="wall"> /div>   
72. canvas width="650" height="478" id="hovertreewk"> /canvas>   
73. script src="http://hovertree.com/texiao/html5/30/js/hovertreewk.js"> /script>   
74. /body>   
75. /html>   

关于HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾的代码就给大家介绍完毕，希望对大家有所帮助！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！