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

本篇内容主要讲解“怎么用HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果”吧!

成都创新互联专注于城西企业网站建设,自适应网站建设,成都商城网站开发。城西网站建设公司,为城西等地区提供建站服务。全流程按需求定制制作，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

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

效果图：

代码如下：

CSS Code复制内容到剪贴板

1.   

2.   

3.   

4.   

5.   

6.   

7.   

8.   

9.   

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.   

66.   

67.   

68. 齐天大圣腾云驾雾