• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果

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

    效果图：

    代码如下：

    CSS Code复制内容到剪贴板
    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实现齐天大圣孙悟空腾云驾雾的代码就给大家介绍完毕，希望对大家有所帮助！

    上一篇：HTML5标签嵌套规则详解【必看】
    下一篇：html5需遵循的6个设计原则
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯

    时间：9:00-21:00 (节假日不休)

    地址：江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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