效果查看：
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. 剑指Offer面试题：33.二叉树的深度

    一.题目一:二叉树的深度 1.1 题目说明 题目一:输入一棵二叉树的根结点,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度.例如下图中的二叉树的 ...

  2. 从Facebook跑来阿里的赵海平大叔，你要干啥？

    赵海平在今年三月份来到阿里,听毕玄(他现任主管)说去年五六月份就跟赵海平聊上了.有人问:为啥 BAT 三大巨头,你看中了阿里巴巴?在今天现场达一千多人的分享中赵海平给出了回复:“因为百度和腾讯没找我呗 ...

  3. MySQL 分析服务器状态

    标签:MYSQL/数据库/性能优化/调优 概述 文章简单介绍了通过一些查询命令分析当前服务器的状态. 目录 概述 获取服务器整体的性能状态 SQL操作计数 总结 步骤 获取服务器整体的性能状态 首先对 ...

  4. Web前端开发大系概览 （前端开发技术栈）

    前言 互联网建立50多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案. 我从2000 ...

  5. 搭建LNAMP环境（六）- PHP7源码安装MongoDB和MongoDB拓展

    上一篇:搭建LNAMP环境(五)- PHP7源码安装Redis和Redis拓展 一.安装MongoDB 1.创建mongodb用户组和用户 groupadd mongodb useradd -r -g ...

  6. angularjs中provider，factory，service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  7. Apk去掉签名以及重新签名的方法

    Android开发中很重要的一部就是用自己的密钥给Apk文件签名,不经过签名的Apk文件一般是无法安装的,就算装了最后也是失败. 网上流传的"勾选允许安装未知来源的应用"其实跟签不 ...

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

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

  9. Execute Sql Task 的Result DataSet如何返回

    Execute Sql Task的Result DataSet 主要有以下四种,当Execute Sql Task返回结果之后,需要使用SSIS Variable 来接收数据. 例子中使用的数据表代码 ...

  10. Sql Server系列：触发器

    触发器的一些常见用途: ◊ 强制参照完整性 ◊ 常见审计跟踪(Audit Trails):这意味着写出的记录不仅跟踪大多数当前的数据,还包括对每个记录进行实际修改的历史数据. ◊ 创建与CHECK约束 ...