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

ttx9n · 发表于 2016-4-26 16:00:58

使用HTML5的canvas画的孙悟空，CSS3画的白云飘飘。本文给大家介绍基于HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果，感兴趣的朋友参考下吧

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

效果图：

20160426160300171.png

代码如下：

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 {
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;}
</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实现齐天大圣孙悟空腾云驾雾的代码就给大家介绍完毕，希望对大家有所帮助！

lba36h7g · 发表于 2022-10-8 03:06:51

vcxvcxv

平平安安 · 发表于 2022-12-2 12:42:56

刷屏刷屏刷屏

e5plu · 发表于 2022-12-15 19:26:55

哈哈哈哈哈哈

dingzhi521 · 发表于 2023-6-12 08:57:40

大家都不容易！

uj9lpc · 发表于 2023-6-15 07:48:06

很不错的源码论坛

jasonlong · 发表于 2023-7-11 03:24:24

你们谁看了弄洒了可能

u6h2m4 · 发表于 2023-10-17 10:10:46

看看怎么样再说

.l4 · 发表于 2023-11-30 22:21:42

天天源码社区。。。。

gyalp · 发表于 2024-3-1 23:58:18

我要金豆金豆金豆

账号		自动登录	找回密码
密码			立即注册

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

相关帖子