search

Home  >  Article  >  Web Front-end  >  HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果_html5教程技巧

HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果_html5教程技巧

PHP中文网
PHP中文网Original
2016-05-23 14:20:142090browse

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

效果图：

<!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 {   
position: absolute;   
top: 0;   
left: 0; 
  
bottombottom: 0;   
rightright: 0;   
}   
div#background { 
  
background: black url(&#39;http://hovertree.com/texiao/html5/30/img/background.png&#39;) 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(&#39;http://hovertree.com/texiao/html5/30/img/midground.png&#39;)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(&#39;http://hovertree.com/texiao/html5/30/img/foreground.png&#39;)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教程技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：整理HTML5移动端开发的常用触摸事件_html5教程技巧Next article：详解如何用HTML5 Canvas API控制图片的缩放变换_html5教程技巧

Related articles

See more