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

摘要：使用HTML5的canvas画的孙悟空，CSS3画的白云飘飘。效果图：代码如下：CSSCode复制内容到剪贴板HTML5+CSS3实现齐天大...

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

效果图：

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

代码如下：

CSS Code复制内容到剪贴板 <!doctypehtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"> <metaname="description"content=""> <metaname="viewport"content="width=device-width,initial-scale=1"> <title>HTML5+CSS3实现齐天大圣腾云驾雾</title> <styletype="text/css"> *{ margin:0; padding:0; border:0; } html,body{ margin:0; } @-webkit-keyframesSTAR-MOVE{ from{ background-position:0%0%; } to{ background-position:600%0%; } } @keyframesSTAR-MOVE{ from{ background-position:0%0%; } to{ background-position:600%0%; } } .wall{ position:absolute; top:0; left:0; bottombottom:0; rightright:0; } div#background{ background:blackurl('http://hovertree.com/texiao/html5/30/img/background.png')repeat-x5%0%; background-size:cover; -webkit-animation:STAR-MOVE200slinearinfinite; -moz-animation:STAR-MOVE200slinearinfinite; -ms-animation:STAR-MOVE200slinearinfinite; animation:STAR-MOVE200slinearinfinite; } div#midground{ background:url('http://hovertree.com/texiao/html5/30/img/midground.png')repeat20%0%; z-index:1; -webkit-animation:STAR-MOVE100slinearinfinite; -moz-animation:STAR-MOVE100slinearinfinite; -ms-animation:STAR-MOVE100slinearinfinite; animation:STAR-MOVE100slinearinfinite; } div#foreground{ background:url('http://hovertree.com/texiao/html5/30/img/foreground.png')repeat35%0%; z-index:2; -webkit-animation:STAR-MOVE50slinearinfinite; -moz-animation:STAR-MOVE50slinearinfinite; -ms-animation:STAR-MOVE50slinearinfinite; animation:STAR-MOVE50slinearinfinite; }#hovertreewk{position:absolute;z-index:9999;top:0px;bottombottom:0px;left:0px;rightright:0px;margin:auto;} </style> </head> <body> <divstyle="text-align:center;position:absolute;z-index:9;color:white"><h1>齐天大圣腾云驾雾</h1></div> <divid="background"class="wall"></div> <divid="midground"class="wall"></div> <divid="foreground"class="wall"></div> <canvaswidth="650"height="478"id="hovertreewk"></canvas> <scriptsrc="http://hovertree.com/texiao/html5/30/js/hovertreewk.js"></script> </body> </html>

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