效果查看：
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. .net core中使用openssl的公钥私钥进行加解密

    这篇博文分享的是 C#中使用OpenSSL的公钥加密/私钥解密 一文中的解决方法在 .net core 中的改进.之前的博文针对的是 .NET Framework ,加解密用的是 RSACryptoS ...

  2. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  3. [译]AngularJS中DOM操作

    再翻译一篇干货短文,原文:AngularJS jQuery 虽然Angularjs将我们从DOM的操作中解放出来了,但是很多时候我们还是会需要在controller/view加载之后执行一些DOM操作 ...

  4. Java 的设计模式之一装饰者模式

    刚开始接触装饰者的设计模式,感觉挺难理解的,不够后来花了一个晚上的时间,终于有头绪了 装饰者设计模式:如果想对已经存在的对象进行装饰,那么就定义一个类,在类中对已经有的对象进行功能的增强或添加另外的行 ...

  5. Linux内核目录结构

    arch 包括所有和体系结构相关的核心代码. include 包括编译内核所需要的大部分头文件 init 包含内核的初始化代码(不是系统的引导代码),有main.c和Version.c两个文件 mm ...

  6. Ado.Net Destination 用法

    Ado Net Destination Component 使用Ado net Connection manager,其Data Access Mode 只有一种, table or view,组件的 ...

  7. 扩：new and override

    昨天有个网友问我继承里面的new和override关键词有啥区别,呃,我们来看个例子就知道了 new ==>隐藏父类同名方法  override==>覆盖 定义一个父类: public c ...

  8. Android 在Service中弹出对话框

    1.在Androidmanifest.xml中插入 <uses-permission android:name="android.permission.SYSTEM_ALERT_WIN ...

  9. JAVA实现发送电子邮件

    相信大家对于网站也好,手机app也好,用户注册时,需要进行邮箱验证的功能特别好奇吧,本篇我将带领大家一起实现一下这个简单而又神奇的小功能,让我们的应用也可以加入这些神奇的元素.废话不多说,下面开始我们 ...

  10. 坑爹的Maven

    之前没用过Maven,最近在研究Curator的时候,导入别人的工程,但是没有相应的包,需使用Maven解决依赖.于是各种折腾,最后虽然解决了,但中间的坑还不少.尽管网上也有相应的安装教程,但很多都是 ...