【女性身体可视化修身工具】用鼠标在人体上拖拽可旋转角度

Flexbox布局模式给网页布局提供了极大的方便，它更grid布局一样都是新出现的新型布局模式，为了让web开发者更容易的理解这种布局，本页内容提供了一个学习实验flexbox布局的场所，让大家更快更容易的了解flexbox布局的语法、用法和使用场景

使用JavaScript和HTML5技术绘制具有动态效果(流水、下雨、飘雾、飞雪等)，而且还要伴音，水声、雨声、风声，栩栩如生。

测测你的眼睛对色差的辨识度，所有的色块中有一个方块的颜色有稍微的不同，你要把它挑出来，在一分钟的时间里，看你能获得多少分，16分以下不要再玩手机了！

请随意画出一个小人，它就能活起来，你可以和它一起完成一次充满奇幻色彩的冒险旅程。

这是一个HTML5 jQuery 益智游戏，玩家需要调换图形的位置来实现目标图案。

上面这个动画效果是SVG+JS实现的，如果你看看实现它们的源代码，会发现非常的简单。

这是一个轻量级的Craig Reynolds的 Boids 算法实现。 一个非常典型的群聚的例子。 它不仅能非常简单的模仿一群鸟， 也可以模拟一群蜂，一群羊或一群人。。

这是一个自我实现的css绘图脚本，页面自己每跳出一行代码，都会即时作用到页面上，展示出这行代码的实际作用，于是，我们就看到了一个鲜红的跳动的心就一步一步的呈现在读者面前。

浏览器的进步给我们带来了很多先进的JavaScript特征，新出现的原生内置(native)JavaScript功能可以很大程度的实现jQuery提供的功能。如果你能了解这些JavaScript新技术，就能在很多地方用纯JavaScript实现以前需要jQuery才能实现的技术

这是一个能方便的找到CSS动画制作的代码片段的地方。

这个里面里你能看到的26个标准的英文字母并不是普通的字体，它们是用CSS在空白的页面上绘制出来的，纯css作品，用鼠标移动到CSS代码上，你能看的这段代码绘制的相应的字母局部。主要运用了CSS3里的多个新变换功能，需要使用最新的浏览器进行观赏。

十分形象的迷宫搜索算法，能看的计算机如何一步一步的探索路径，障碍物，最终确定最佳，最近的路线图

这是用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互动式程序员求职简历，一定会让你惊异不已。