HTML5制作新年贺春

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'/> <meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'/> <meta name='format-detecion' content='telephon…

程序员用HTML5制作的爱心树表白动画

体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm 推荐:http://hovertree.com/texiao/css3/18/ HTML代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <title>程序员用HTML5制…

使用HTML5制作loading图

昨天发了一篇使用HTML5 canvas写的时钟的文章,今天发一篇关于使用HTML5制作loading图的文章. <!DOCTYPE html> <html> <head> <title></title> </head> <body> <canvas id = "canvas"></canvas> <script> var Loading = function (ca…

使用HTML5制作时钟

之前看到别人用HTML5制作时钟,自己也写了一个,这是很久以前写的了,没有注释,现在自己看都晕了(注释的重要性就体现在这边了),找时间加上注释,让自己和别人都比较好理解. <!DOCTYPE html> <html> <head> <title>html5时钟</title> </head> <body> <canvas id = "canvas"></canvas> <s…

jquery+html5制作超酷的圆盘时钟表

自己封装的一个用HTML5+jQuery写的时钟表代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76…

html5制作一个时钟

试着用html5写一个时钟记得开始这个随笔是几天前,一直保存在草稿里面,一直感觉有个东西搁在在那里,所以今天熬夜也要写完这篇博客!!!哈哈...不多说来上代码和思路. --------------------------------------------------------------------------------------------- 其实并不难,主要看你是否掌握了canvas下面几个属性:save(),restore();ratate();translate(),moveT…

基于html5制作3D拳击游戏源码下载

今天给大家分享一款基于HTML5实现的3d拳王游戏源码.这款实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览源码下载实现的代码. html代码: <div id="chf2" style="position: relative; width: 320px; margin: 0 auto;"> <canvas id="gcvs" w…

用Html5制作的一款数学教学程序Function Graphics(绘制函数图的程序)

最近我不仅对游戏开发感兴趣,还对函数图感兴趣,特此我开发了这个程序.以下是一些介绍和下载演示地址,喜欢的朋友可以看看: 一,产品名片产品名:Function Graphics 版本: 0.1 开发者:Yorhom Wang 首次发行时间:2013年 4月4日分类:教学程序功能:画出一,二,三次函数图象开发语言:JavaScript&HTML5 二,怎么使用下载地址(含有源码): http://files.cnblogs.com/ducle/function_graphs.rar 在线使…

google web design html5制作工具

Google 推出 Web Designer,帮助你做 HTML 5 设计的免费本地应用,支持 Windows 和 OS X 2013年10月1日感谢读者 SamRaper 的提醒. Google发布Web Designer beta,这个Windows和OS X下的免费应用可帮助你制作互动广告和其它HTML 5内容,很显然基于HTML 5的广告将在数年后代替现在满天飞的Flash. Google Web Designer主要特性: 创造HTML 5动画,内置具备完整而直观的设计…

分享一个利用HTML5制作的海浪效果代码

在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了“海浪效果”(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif 动画分析构成:贝塞尔曲线画布:Canvas效果:波浪涨潮(上升.波动)触发条件:点击按钮贝塞尔曲线.gif 算法实现分析:从sin()函数切入,sin()越大波度起伏越大,简单说就是通过不断改变sin()值来实现海浪效果动画干货开始: 1.创建触发条件(按钮) 1 2 3 4 5 <button type="butt…

html5制作坦克大战

全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参照点,画出坦克的其他部分. 这样的好处是,当左上角的点发生改变是,坦克才能发生改变. 不使用图片的原因就是图片是比较耗费资源的.因为图片的像素点很大. tankGame1.html的代码 <!DOCTYPE html><html><head><meta charset…

使用HTML5制作简单的RPG游戏

很久以前就想着做一个游戏,但什么都不会又不知道从哪里开始,胡乱找来一些书籍和资料结果太深奥看不懂,无奈只能放弃.这一弃就是十多年,倥偬半生,眼看垂垂老矣,还是没能有什么成果. 近年来游戏引擎越来越多,相关资料也愈加丰富,使得游戏开发的门槛不再那么高了.特别是HTML5游戏,只需要一个支持HTML5的浏览器就能运行,特别适合我这样的初学者.一个偶然的机会,在某著名视频网站上发现很多关于Enchant.js 这个游戏引擎的教学视频,还有一本教程叫做<HTML5 Game Programming wi…

02_HTML5+CSS3详解第五、六天（实战篇之HTML5制作企业网站）

[废话连篇 - 实战篇,没什么好说的,最后一章兼容性问题懒得看了,over] Details 一.Xmind部分 xmind教程:http://www.jianshu.com/p/7c488d5e4bdf xmind安装破解(百度网盘链接:https://pan.baidu.com/s/1dEN1g2X 密码:pzrf) .hd_left li{ display: inline-block; /*去掉li前面的圆点*/ vertical-align: bottom; counter-increm…

HTML5制作网页（2）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>王智超的第四次练习</title> </head> <body> <li>在分享一些新东西之前,我还是将之前学过的再来复习一下吧!(害怕忘了,毕竟没有作业)</li> <br /> <ol type="1">…

html5制作导航条

(1)background-repeat:no-repeat;图片不平铺 (2)使用<ul>和<li>便签,代码简介有序.易于编排. (3)在引入外部css文件时,<link>标签中的rel是关联的意思,rel="stylesheet"; (4)display:inline;实现使多个<div>像<span>标签显示在一行. (5)list-style:none;列表样式:无. 用于在一个声明中设置列表的所有属性的简写属性.…

HTML5制作简单画板

<!DOCTYPE HTML> <html lang="en-US"> <head> <title></title> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </he…

利用html5制作一个时钟动画

<canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas> var clock=document.getElementById("clock"); var cxt=clock.getContext("2d"); function drawNow(){…

游戏2：HTML5制作网页游戏看看你有多色--createjs

效果: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>看你有多色</title> <script src="easeljs.min.js"></script> <script src="Rect.js">&…

游戏1：HTML5制作网页游戏围住神经猫--createjs

游戏简介:点击小圆圈,是蓝色的小圆圈不跑出圆圈外,跑出则结束游戏准备工作: 下载easejs :下载地址:http://www.createjs.cc/easeljs 中文网站效果: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>围住神经猫游戏</title> <…

程序员用HTML5给女朋友制作的3D相册

程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近.程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的.本相册使用了HTML5的画布技术,需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看. 效果网址:http://keleyi.com/keleyi/phtml/html5/25/ 点击这里下载源代码 :http://hovertree.com/h/bjaf/3dhtml5xc.htm 转载自:http://keleyi.com/a/bjad…