你的位置:首页 > 网页设计

[网页设计]canvas孙悟空脚踩白云今年是猴年

效果查看:
http://hovertree.com/texiao/html5/30/

使用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>canvas孙悟空脚踩白云今年是猴年 - 何问起</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;bottom: 0;right: 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;bottom:0px;left:0px;right:0px;margin:auto;}</style></head><body><div style="text-align:center;position:absolute;z-index:9;color:white"><h1>canvas孙悟空脚踩白云今年是猴年</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>

转自:http://hovertree.com/h/bjaf/e1r8s4va.htm

推荐:http://hovertree.com/texiao/jquery/36/

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html