Home > Web Front-end > H5 Tutorial > body text

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

PHP中文网
Release: 2016-05-23 14:20:14
Original
2067 people have browsed it

使用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>
Copy after login

以上就是HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果_html5教程技巧的内容,更多相关内容请关注PHP中文网(www.php.cn)!


source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!