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

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

效果图:

代码如下:

CSS Code复制内容到剪贴板 <!doctype html>    <html>    <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="description" content="">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>HTML5+CSS3实现齐天大圣腾云驾雾</title>    <style type="text/css">    * {    margin: 0;    padding: 0;    border: 0;    }    html, body {    margin: 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 {    positionabsolute;    top: 0;    left: 0;    bottombottom: 0;    rightright: 0;    }    div#background {    backgroundblack url(http://hovertree.com/texiao/html5/30/img/background.pngrepeat-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#midground {    backgroundurl(http://hovertree.com/texiao/html5/30/img/midground.png)repeat 20% 0%;    z-index: 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#foreground {    backgroundurl(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;    }#hovertreewk{position:absolute;z-index:9999;top:0px;bottombottom:0px;left:0px;rightright: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" height="478" id="hovertreewk"></canvas>    <script src="http://hovertree.com/texiao/html5/30/js/hovertreewk.js"></script>    </body>    </html>  

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

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