使用HT ML 5的canvas画的孙悟空，CSS3画的白 云 飘飘。
效果图：
代码如下：
CSS Code 复制内容到剪贴板
<!docty PE &nbs p; html> <html> <head> < ;m eta charset= "utf-8" > <meta http-equiv= "X-UA-Compatible" content = "IE= Edge ,ch rom e=1" > <meta n am e= "description" content = "" > <meta name= "viewport" content = "width=device-width, in IT ial -s cale=1" > <title>HTML5+CSS3实现齐天大圣腾云驾雾</title> <style type= "text/css" > * { m arg in : 0; padding : 0; border : 0; } html, body { mar gin : 0; } @- webkit -keyframes STAR-MOVE { From { background-position : 0% 0%; } to { background-position : 600% 0%; } } @keyframes STAR-MOVE { from { background-position : 0% 0%; } to { background-position : 600% 0%; } } .wall { position : absolute ; top : 0; left : 0; bottom bottom : 0; right right : 0; } div # backgr ound { background : black url ( 'http://hovertree .COM /texiao/html5/30/ img /background.png' ) repeat -x 5% 0%; background - size : cover; -webkit-animation: STAR-MOVE 200s linear infinite; -moz-animation: STAR-MOVE 200s linear infinite; -ms-animation: STAR-MOVE 200s linear infinite; animation: STAR-MOVE 200s linear infinite; } div #midgro und { background : url ( 'http://hovertree.com/texiao/html5/30/img/midground.png' ) repeat 20% 0%; z -i ndex : 1; -webkit-animation: STAR-MOVE 100s linear infinite; -moz-animation: STAR-MOVE 100s linear infinite; -ms-animation: STAR-MOVE 100s linear infinite; animation: STAR-MOVE 100s linear infinite; } div #foregr ound { background : url ( 'http://hovertree.com/texiao/html5/30/img/foreground.png' ) repeat 35% 0%; z-index : 2; -webkit-animation: STAR-MOVE 50s linear infinite; -moz-animation: STAR-MOVE 50s linear infinite; -ms-animation: STAR-MOVE 50s linear infinite; animation: STAR-MOVE 50s linear infinite; } #hovert reewk{ position : absolute ; z-index :9999; top : 0px ; bottom bottom : 0px ; left : 0px ; right right : 0px ; margin : auto ;} </style> </head> <body> <div style= "text-align: center ;position:absolute;z-index:9;color:white" >< h1 >齐天大圣腾云驾雾</h1></div> <div id= "background" class= "wall" ></div> <div id= "midground" class= "wall" ></div> <div id= "foreground" class= "wall" ></div> <canvas width = "650" h ei ght = "478" id= "hovertreewk" ></canvas> <script src = "http://hovertree.com/texiao/html5/30/js/hovertreewk.js" ></script> </body> </html>
关于HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾的代码就给大家介绍完毕， 希望对大家有所帮助 ！
总结
以上是 为你收集整理的 HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果 全部内容，希望文章能够帮你解决 HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果的详细内容...