十分形象的迷宫搜索算法,能看的计算机如何一步一步的探索路径,障碍物,最终确定最佳,最近的路线图
这是用HTML5画布(canvas)制作的一款简单的消消乐游戏,如果你玩过消消乐游戏,一定知道其中的玩法:将邻居的相同颜色的方块用鼠标进行联线,它们就会消掉,新的方块会立即补充进来,目标是看谁在限定的时间内消的最多。
这里我们用纯CSS技术表现出30种动物的碎片拼图形象,这30动物,非常的可爱,但不幸的是,它们都是濒临灭绝的动物,它们的生存情况正面临着危机。
非常简单但却有趣的CSS3游戏
这是用纯HTML5和JavaScript实现的Winamp音乐播放器,它不仅仅外观看着像,它是以为可以实际播放音乐的HTML5音乐播放器。它可以播放你提供的音乐歌曲。
CSS3中的:nth-child 伪类是一种非常有用的技巧。使用它,你可以通过CSS控制页面元素的第n个元素,或倒数第n个元素,或从第m个到第n个范围子元素的样式,甚至包括奇数位和偶数位过滤。
这是一个用HTML5制作的智力游戏,有相当的难度。每个方块一面橙色,一面蓝色。点击一个方块,这个方块的颜色会翻转,并且,与它邻接的方块的颜色也会翻转。使拼板全部变成蓝色, 你就算过关了。
随着浏览器的进步和发展,网页视差技术获得了越来越多的应用。各种流行时尚的产品公司纷纷在产品描述时使用各种各样的HTML5和CSS3技术来充分选用他们的产品的特性,而网页视差技术就是其中的一项重要技术,通过视差,产品的浏览者很获得前所未有的新奇感受。
今年早些时候,我们注意到,耐克官方网站出现了一个具有神奇的滚动视差效果的页面。它是如何实现的?这里,我将通过一些代码解释这个耐克鞋的具有视差效果的页面的工作原理。
CSS3给Web程序员提供了无限发挥的创造空间,以前只有视频、Flash、JavaScript才能实现的动画效果,如今只需要纯CSS+HTML就能做到。你能相信吗?这里呈现的所有动画,都是由一个DIV元素实现,纯CSS3技术。
HTML5和CSS3的诞生和普及必将对传统行业带来巨大的冲击,像微软PPT这样的软件必将慢慢转移的在线的HTML5+CSS3上,因为用HTML5+CSS3实现幻灯片不仅更简单、容易,而且功能更强调,特效更绚丽。impress.js就是这样一款可以让你轻松利用CSS3动画实现具有神奇特效的幻灯片工具。
这里提供了各种各样的超链接特性,有些是借助伪元素,有些是借助svg,有些是借助HTML5动画。用你的鼠标悬停在这些链接上,给你跟传统链接完全不一样的效果感觉。你需要使用现代浏览器,比如谷歌浏览器或火狐浏览器。
这款简单而有趣的游戏是使用HTML5+js开发完成的,需要提醒大家注意的是,你需要使用支持HTML5的浏览器才能玩这个游戏,也就是说,你需要使用火狐浏览器或谷歌浏览器。游戏中,如果自定义参数设置的过于夸张,很可能会导致你的浏览器崩溃。回合时间是指鸭子飞走前的飞行时间。难度值可以是1-10,是来控制鸭子的飞行速度的。高于8的难度都属于有些夸张。鸭子数和子弹数都有个上限——你可以输入任何值,如果数目设的太大,程序是不会显示的。
下面这个人脑袋的五官的摆放就是采用了“自适应网页设计”,调整你的浏览器窗口的大小,或分别使用桌面电脑、平板和手机访问这个页面,看看这脑袋上的五官布局是如何适应屏幕的变化的。自适应网页设计,也叫做响应式网页设计(英语:Responsive web design)是一种网页设计的技術做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其它便携设备)上阅读和导航,根据设备尺寸的不同,自动的调整页面上的元素布局和数量。
这是旧金山大学的David Galles教授用HTML5+js制作的数据结构动画课件中算法动画比较部分。教授利用JS+HTML5 Canvas技术分别演示了6中数学排序算法的基本原理,即介绍了数学知识,又让这种教学变得饶有兴趣。你可以看出HTML5技术将会在各个方法起到越来越重要的作用。
HTML5技术的发展、浏览器技术的进步,不仅给程序员带来了福祉,而且给漫画爱好者带来了新的体验和享受,HTML5技术的革新使得配乐情景漫画的制作变得十分容易,并且给漫画赋予了交互性。欣赏这样的一本漫画作品绝对是一种超值的享受。注意情节中的配音,请开大音量获得最佳效果。
这是一个很酷的HTML5技术应用,用户可以在画布上用画笔写出自己想看的文字或图案,这个应该能将你写的东西用3D方式呈现,而且让它围着中心3D旋转,只要你设计的巧妙,你可以绘制出让人惊叹的效果和图案。
这是一个生产内衣的公司使用HTML5技术制作的公益游戏。曾获得Cutting Edge技术奖。游戏的主旨是反对印度国内存在的包办婚姻现象。内衣公司的游戏非常有内衣特色。但游戏中使用的技术还是让人佩服的,纯HTML5+JS,整个游戏有很好的互动性,值得游戏设计者学习。
程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近。程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术,需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。
如果当你翻开一本书的时候,里面飞出来一只蝙蝠,或是一条会喷火的龙,你会有什么感觉?惊奇!赞叹!目瞪口呆!我想到了电影《哈利波特》里的那份会动的报纸。这里将会给你带来一种类似的奇观——一本书里的大千世界。随着浏览器技术的不断革新,越来越多的可能成为了现实。这里就是现代网页技术的典型代表。
翻滚的海面,摇摇欲坠的灯塔,密布的乌云,暴风雨中的海燕。在加上CSS三维视差效果,虽是童话的世界,但亦真亦幻,令人神往。本作品是使用轻量级的js视差效果引擎parallax.js实现。在智能移动设备上效果更佳。
程序员的求职简历应该体现出程序员的技术能力,但几乎所有的简历都是用文字表述的,为什么让简历载体自身成为体现程序员技能的平台呢?如果你还不明白我说的是什么意思,那就看看这个超级酷炫的HTML5互动式程序员求职简历,一定会让你惊异不已。
Clippy.js 是一个纯JavaScript实现的微软Office卡通助手(也叫做Clippy和它的朋友们),你可以方便的把它嵌入到任何网页上。在下面挑选一个助手,点击相应的动画按钮!我们的最爱是那个可爱的小猫。
打飞字(Z-Type)这是有史以来最酷的一款练习盲打的游戏。视觉效果、射击爆破效果和声音效果都非常的刺激。这款游戏是用HTML5做成的,曾经获得Mozilla Game On游戏大赛的Community Choice Award大奖。玩家可以选择关闭游戏音效,轻按ESC按键便可以暂停游戏。
如果你能想象出在光线充足的海里拍摄一群水母游动样子,那这里用WebGL技术实现的水母游动的效果绝对会让你以为是一段真实拍摄的视频。不能不佩服作者的技术高超。
这是一个很有趣的网页,按住 ↓ 不放,你会经历从天堂到人间到地狱的过程,松开键,你又会经历从地狱到人间道天堂的过程。沿途有很多的景观,走马观花的看吧。
使用浏览器里的WebGL技术逼真模拟水池、水、球、光影的互动变化效果。本演示需要你的电脑有一个相当不错的显卡和最新的显卡驱动。互动效果有:点击水面激起波澜,拖拽页面来旋转视角,使用G键来翻转重力,等等..
html5调用摄像头,然后分析你的脸部。你需要使用谷歌浏览器。你需要开启摄像头。点击右边的图片,看看自己的效果。
用浏览器WebGL技术模拟出的不可思议的海面风浪效果,只用简单的js就完全模拟出了专业软件里才会有的三维模型,并且能够手动调整浪高,风向,风力,海面大小。
不是视频,不是flash,没有用Javascript,没有用HTML5 Canvas,没有用一张图片,所有的鱼、水、石、怪以及动画效果都是用纯CSS3画出来的,真真叫人佩服的五体投地
你什么都不用想,对着键盘狂敲一气,看看会有什么结果?哈哈,肯定会让你大吃一惊——“哈哈,没想到我也是骇客高手了”
HTML5视频+画布(canvas)技术制作的爆裂的视频画面效果演示,使用谷歌浏览器观看效果最佳。 如果视频不能正确播放,请刷新页面,重新加载视频。这段视频来自Big Buck Bunny。
这是我将基于网络摄像头的手势识别技术和Hakim El Hattab开发reveal.js融合到一起的研究成果。我花了很长时间开发和优化调整这个手势识别算法。即使如此,这个算法仍然只有大概80%的准确性。但相信它已经足够让你领略到这种技术的潜力了:
提示:将鼠标放到立方体上,会发现更炫的动画效果。(用谷歌浏览器观看效果最佳) 前后上下左右