canvas孙悟空脚踩白云今年是猴年

效果查看:http://hovertree.com/texiao/html5/30/使用HTML5的canvas画的孙悟空,CSS3画的白云飘飘。刚擒住了几个妖又降住了几个魔魑魅魍魉怎么他就这

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

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

使用HTML5的canvas画的孙悟空,CSS3画的白云飘飘。

刚擒住了几个妖

又降住了几个魔

魑魅魍魉怎么他就这么多

(嘿嘿!吃俺老孙一棒!)

效果图:
canvas孙悟空脚踩白云今年是猴年

代码如下:

<!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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120610.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 微信开放平台授权登录详细流程-第三方登录「建议收藏」

    微信开放平台授权登录详细流程-第三方登录「建议收藏」官方文档介绍的很详细,下面是看到的一篇博客,很有帮助,感谢!原文:https://blog.csdn.net/qq_34190023/article/details/81133619 据微信开放平台“开发资源”中网站应用微信登陆功能开发指南描述:进行授权登陆接入前,需要先注册一个开发者账号,并拥有一个已经审核通过的网站应用,并获取AppID和APPSecret,然后申请微信登陆并通过审核后…

  • 如何从官网下载Hibernate源码与jar包「建议收藏」

    如何从官网下载Hibernate源码与jar包「建议收藏」最新官网变了,教程同步更新:http://blog.csdn.net/leisure_life/article/details/78678613最新官网变了,教程同步更新:http://blog.csdn.net/leisure_life/article/details/78678613如何从官网下载Hibernate源码与jar包教程学习Hibernate需要用到源码和jar包,去网盘找往

    2022年10月30日
  • mysql倒序截取字符串_MySQL数据库之mysql截取字符串与reverse函数

    mysql倒序截取字符串_MySQL数据库之mysql截取字符串与reverse函数本文主要向大家介绍了MySQL数据库之mysql截取字符串与reverse函数,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助。这个网页上很多知识点,可以学习下,关于mysql的函数,也可以作为API查询:这里只说下mysql的截取函数和reverse函数:MySQL字符串截取函数:left(),right(),substring(),substring_index()…

    2022年10月31日
  • 透视投影变换矩阵推导_矩阵的投影

    透视投影变换矩阵推导_矩阵的投影投影矩阵的推导(DerivingProjectionMatrices) 本文乃译文,原文地址为:http://www.codeguru.com/cpp/misc/misc/math/article.php/c10123__1/Deriving-Projection-Matrices.htm,由于本人能力有限,有译的不明白的地方大家可以参考原文,谢谢^-^!译者:流星上的潴如

  • Android之打开手机系统相册[通俗易懂]

    Android之打开手机系统相册[通俗易懂]1、需求打开系统相册,获取图片进行扫描操作2、代码实现IntentpickIntent=newIntent(Intent.ACTION_PICK,MediaStore.Images.Media.EXTERNAL_CONTENT_URI);pickIntent.setDataAndType(Med…

  • 程序员进外包后不好找工作吗_程序员去外包是不是就废了

    程序员进外包后不好找工作吗_程序员去外包是不是就废了在职场中选择公司非常重要,有些人为了贪图大公司名气,选择去干大公司的外包,但要知道外包跟正式员工,不管是收入还是从职业地位来说相差非常大,所以建议想去外包公司上班的请慎重。最近在职业论坛看到这样一个热门的帖子,“二本毕业,在华为外包工作3年,考虑跳槽却不收外包背景,怎么办”。到底怎么回事?请往下看。原来一位网友说,自己是二本毕业,到现在已经三年了,一直在华为外包,工作时间和华为正式工一样,每…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号