suchen

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

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

PHP中文网
PHP中文网Original
2016-05-23 14:20:142078Durchsuche

使用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）！


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：整理HTML5移动端开发的常用触摸事件_html5教程技巧Nächster Artikel：详解如何用HTML5 Canvas API控制图片的缩放变换_html5教程技巧

In Verbindung stehende Artikel

Mehr sehen