效果查看：
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. UI控件（UISegmentedControl）

    @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; NSArray* segmentArray = [[ ...

  2. 大白话讲解Promise（二）理解Promise规范

    上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理.所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解 ...

  3. springboot之HelloWorld

    简介 为了简化开发Spring的复杂度,Spring提供了SpringBoot可以快速开发一个应用,这里就简单介绍下SpringBoot如何快速开发一个J2EE应用 HelloWorld 首先在gra ...

  4. Hystrix框架2--超时

    timeout 在调用第三方服务时有些情况需要对服务响应时间进行把控,当超时的情况下进行fallback的处理 下面来看下超时的案例 public class CommandTimeout exten ...

  5. Atitit.软件开发的几大规则，法则，与原则Principle v3

    Atitit.软件开发的几大规则,法则,与原则Principle  v31.1. 修改历史22. 设计模式六大原则22.1. 设计模式六大原则(1):单一职责原则22.2. 设计模式六大原则(2):里 ...

  6. Uiautomator 2.0之Configrator类学习小记

    1. Configration类介绍 1.1. Configrator用于设置脚本动作的默认延时 1.2  Configrator功能: 1.2.1 可调节两个模拟动作之间的默认间隔 1.2.2 可调 ...

  7. SSIS Execute SQL Task 用法

    Execute Sql Task组件是一个非常有用的Control Flow Task,可以直接执行SQL语句,例如,可以执行数据更新命令(update,delete,insert),也可以执行sel ...

  8. SQL Server 2014新特性探秘(1)-内存数据库

    简介    SQL Server 2014提供了众多激动人心的新功能,但其中我想最让人期待的特性之一就要算内存数据库了.去年我再西雅图参加SQL PASS Summit 2012的开幕式时,微软就宣布 ...

  9. contains与compareDocumentPosition

    Sizzle中有一个contains方法(jQuery.contains),用来遍历是否包含指定的元素 IE率先引入一个contains()方法,可以在节点中查找某一个节点是不是当前节点的厚点,如果 ...

  10. MVC4做网站Demo进行重写的问题。

    自从学习MVC4开始,边学边写这个demo,写了也有一年多了.开始觉得是一个小例子把所有的代码都写在一个项目中,边写边改越写越混乱,越到后来很多东西自己都理不清了.后来在群里跟 @怒放 在讨论这个问题 ...