效果查看：
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

canvas孙悟空脚踩白云今年是猴年的更多相关文章

  1. 异数OS 织梦师-Xnign（四）-- 挑战100倍速Nginx，脚踩F5硬件负载均衡

    . 异数OS 织梦师-Xnign(四)– 挑战100倍速Nginx,脚踩F5硬件负载均衡 本文来自异数OS社区 github: https://github.com/yds086/HereticOS ...

  2. 使用Redis——拳打南山敬老院，脚踩北斗幼儿园

    拳打南山敬老院,脚踩北斗幼儿园 Redis 你说你用过对吧,你们怎么用的? 面试官您好,因为传统的关系型数据库如Mysql已经不能适用所有的场景了,比如秒杀的库存扣减,APP首页的访问流量高峰等等,都 ...

  3. ## H5 canvas画图白板踩坑

    最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了. 主要是记录一下自己菜到像傻子一样的技术. 1.canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大. 2. ...

  4. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  5. canvas - drawImage()方法绘制图片不显示的问题

    canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等.   问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...

  6. HTML5 Canvas 绘制图片不显示的问题

    问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~ 我按照流水线工程铺设以下几 ...

  7. 线上问题排查，一不小心踩到阿里的 arthas坑了

    最近帮新来的校招同学排查一个线上问题,问题本身不是很难,但是过程中踩到了一个arthas的坑,挺有意思的. 同时,也分享下在排查过程中使用的一些比较实用的工具,包括tcpdump.arthas.sim ...

  8. C#非常重要基础之多态

    前几天看了一位同志的博客,写的是关于他自己去支付宝面试的经历.过程大体是这样的:问答的时候,前面部分,作者都应答如流,说起自己经验如何之丰富,最后面试官问了作者一个问题:请简述多态的概念和作用.结果这 ...

  9. React项目（二）：生命游戏

    引子 这是16年最后的一个练手项目,一贯的感觉就是,做项目容易,写说明文档难.更何况是一个唤起抑郁感觉的项目,码下的每个字,心就如加了一个千斤的砝码. 2016年,有些事我都已忘记,但我现在还记得.2 ...

随机推荐

  1. 架构之路（七）MVC点滴

    我们目前正在开发中的是任务管理系统,一个前端复杂的项目,所以我们先从MVC讲起吧. WebForm 随着ASP.NET MVC的兴起,WebForm已成昨日黄花,但我其实还很想为WebForm说几句. ...

  2. Python黑帽编程 3.5 DTP攻击

    Python黑帽编程 3.5 DTP攻击 在上一节,<Python黑帽编程 3.4 跨越VLAN>中,我们讨论了一般的VLAN中实施攻击的方法,这一节属于扩展内容,简单演示下Cisco特有 ...

  3. ASP.NET MVC学前篇之Ninject的初步了解

    ASP.NET MVC学前篇之Ninject的初步了解 1.介绍 废话几句,Ninject是一种轻量级的.基础.NET的一个开源IoC框架,在对于MVC框架的学习中会用到IoC框架的,因为这种IoC开 ...

  4. 非正规方法处理AngulurJS模块管理问题

    1.起因 自己一直做winform,有幸从某个大神手里接了一个node.js,express,angulurJS等集众多开源框架的一个项目,赶鸭子上架,于是一边学习,一边用自己以往的思中去整理,重构代 ...

  5. angularjs controller 继承

    前沿 最近在angularjs项目当中,看到 controller 好多都是重复性的代码,在 controller 当中有好多代码很相似 function(比如 controller 下的 CRUD ...

  6. Juint整合Log4j

    一般Log4j配置在web.xml中,在单元测试时,不需要启动Tomcat,所有Log4j找不到配置文件 在测试类中手动加载 配置文件 PropertyConfigurator.configure(& ...

  7. Uiautomator 2.0之BySelector类学习小记

    1. BySelector与By静态类 1.1 BySelector类为指定搜索条件进行匹配UI元素, 通过UiDevice.findObject(BySelector)方式进行使用. 1.2 By类 ...

  8. CSS移动端多行显示多余省略号

    /*css3 多行显示省略号,也可用于单行*/ .one-line { display: -webkit-box; overflow : hidden; text-overflow: ellipsis ...

  9. 让IE系列支持HTML5的html5shiv.js和respond.min.js

    HTML5越来越成为主流,被广大搜索引擎所使用,但IE对HTML5的支持却常被人唾弃. 解决方案有两种: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面, ...

  10. php 操作数组（合并，拆分，追加，查找，删除等）（转载）

    1. 合并数组 array_merge()函数将数组合并到一起,返回一个联合的数组.所得到的数组以第一个输入数组参数开始,按后面数组参数出现的顺序依次迫加.其形式为: array array_merg ...