怎么用HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
本篇内容主要讲解“怎么用HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果”吧!
成都创新互联专注于城西企业网站建设,自适应网站建设,成都商城网站开发。城西网站建设公司,为城西等地区提供建站服务。全流程按需求定制制作，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务
使用HTML5的canvas画的孙悟空，CSS3画的白云飘飘。
效果图：
代码如下：
CSS Code复制内容到剪贴板
HTML5+CSS3实现齐天大圣腾云驾雾 * {
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 {
position: absolute;
top: 0;
left: 0;
bottombottom: 0;
rightright: 0;
}
div#background {
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#midground {
background: url('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 {
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;
}#hovertreewk{position:absolute;z-index:9999;top:0px;bottombottom:0px;left:0px;rightright:0px;margin:auto;}
齐天大圣腾云驾雾