CSS动画是当前一种非常火爆的技术，我说的并不是一些简单的颜色变换或长短属性变换，我说的是3D变换技术；纯CSS实现的翻滚旋转立方体就是最典型的例子。网上能找到很多关于CSS动画的代码，但对于一个程序员来说，真正理解其为什么会动起来的原理是非常重要的。

Clippy.js 是一个纯JavaScript实现的微软Office卡通助手(也叫做Clippy和它的朋友们)，你可以方便的把它嵌入到任何网页上。在下面挑选一个助手，点击相应的动画按钮！我们的最爱是那个可爱的小猫。

打飞字(Z-Type)这是有史以来最酷的一款练习盲打的游戏。视觉效果、射击爆破效果和声音效果都非常的刺激。这款游戏是用HTML5做成的，曾经获得Mozilla Game On游戏大赛的Community Choice Award大奖。玩家可以选择关闭游戏音效，轻按ESC按键便可以暂停游戏。

使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。

我一直使用printf调试程序，一般来说都是比较顺利，但有时候，你会发现需要更好的方法。下面几个JavaScript技巧相信你一定会觉得十分有用，比如，有时候你会发现DOM不受你的控制，自己会发生一些奇怪的变化，让你很难找出问题的根源。谷歌浏览器的开发工具里有一个超级好用的功能，专门可以对付这种情况，叫做”Break on…”，

如果你能想象出在光线充足的海里拍摄一群水母游动样子，那这里用WebGL技术实现的水母游动的效果绝对会让你以为是一段真实拍摄的视频。不能不佩服作者的技术高超。

相信大家都见到过这样神奇的技术：一副线条构成的画能自动画出自己。非常的酷。Jake Archibald是这种SVG技术的首创者，并且写了一篇非常好的文章来描述它是如何实现的。其实我没有什么好增补的，只是想把这种技术说的更明白些，所以，在这里我要用我的方式把这种技术再讲解一遍。

SVG里属性d里的每一部分都是告诉浏览器生成一个动作——移动到某一个点，开始画一条线，画一个贝齐尔弧线，等等。关于这些数据是如何变成动画，变成一条慢慢画出的线，这是个非常复杂的问题，幸运的是，我们不用考虑这些。我可以使用颜色和设置点的宽度，让SVG路径变成一段一段的点线，并控制点的偏移量：

这是一个很有趣的网页，按住 ↓ 不放，你会经历从天堂到人间到地狱的过程，松开键，你又会经历从地狱到人间道天堂的过程。沿途有很多的景观，走马观花的看吧。

使用浏览器里的WebGL技术逼真模拟水池、水、球、光影的互动变化效果。本演示需要你的电脑有一个相当不错的显卡和最新的显卡驱动。互动效果有：点击水面激起波澜，拖拽页面来旋转视角，使用G键来翻转重力，等等..

html5调用摄像头，然后分析你的脸部。你需要使用谷歌浏览器。你需要开启摄像头。点击右边的图片，看看自己的效果。

用浏览器WebGL技术模拟出的不可思议的海面风浪效果，只用简单的js就完全模拟出了专业软件里才会有的三维模型，并且能够手动调整浪高，风向，风力，海面大小。

不是视频，不是flash，没有用Javascript，没有用HTML5 Canvas，没有用一张图片，所有的鱼、水、石、怪以及动画效果都是用纯CSS3画出来的，真真叫人佩服的五体投地

你什么都不用想，对着键盘狂敲一气，看看会有什么结果？哈哈，肯定会让你大吃一惊——“哈哈，没想到我也是骇客高手了”

HTML5视频+画布(canvas)技术制作的爆裂的视频画面效果演示，使用谷歌浏览器观看效果最佳。
如果视频不能正确播放，请刷新页面，重新加载视频。这段视频来自Big Buck Bunny。

这是我将基于网络摄像头的手势识别技术和Hakim El Hattab开发reveal.js融合到一起的研究成果。我花了很长时间开发和优化调整这个手势识别算法。即使如此，这个算法仍然只有大概80%的准确性。但相信它已经足够让你领略到这种技术的潜力了：

在一个移动信息化和本地化同时存在是世界里，HTML5就成了这两种平台之间的桥梁。HTML5是开发多功能网站和Web应用的未来技术选择。你的编程技术是跟未来软件开发趋势同向而行吗？测一测你的HTML5和CSS3知识有多少，看看你能得多少分。

我在reddit上发现了一张圣诞树动画图片，好奇心驱使我使用JavaScript制作了一个相同效果的树：新年快乐！。祝愿大家在新的一年里心想事成，马到成功！

CSS Transform效果是指通过在浏览器里让网页元素移动、旋转、透明、模糊等方法来实现改变其外观的技术。在CSS里定义的变化动作会在页面生成前应用到网页元素上，所以你看不到发生的过程。然而，这些变化动作也可以由mouseover或其它相似事件触发，这样我们就可以看到它的动作过程。

自从大概两年前用CSS给SIGT设计了logo后，我心里一直有个想法，我认为使用Verdana字体和CSS里的绝对定位技术能画出更复杂的图案，也就是说，直接用HTML代码生成嵌入式的矢量图。

CSS3D旋转立方体绝对是能充分代表这些年CSS发展新高度的典型案例。从一种只是简单的颜色和尺寸渲染的标记符，CSS现在已经变成了一种能够创造出复杂的、具有艺术感染力的视觉效果的编程语言。动画效果的生成变得非常的简单易行。

最近我想修改一下这个网站，我想在上面放置一个提示框。这是很容易，但我想让提示框上有一个三角形的箭头。可是，一想到这需要使用图片，并且各种颜色，各种方向的箭头要准备无数种，这几乎是一种灾难。幸运的是，MooTools的核心开发着Darren Waddell告诉了我一个非常棒的技术：用CSS绘制三角形箭头。

随着老式浏览器(IE6，IE8)的逐渐淘汰，现代浏览器(火狐浏览器，谷歌浏览器，Opera，Safari)走向主流，越来越多的HTML5和CSS3技术开始出现在各种网站上。这些最新的网页技术究竟能给我们今后的浏览带来什么样的改变？下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已。

根据Mozilla软件工程师Cameron McCormack的透露，火狐浏览器从V29版开始支持一种新的CSS特征——CSS变量。下面这个视频可以让你大概的了解一下CSS变量的基本情况：

CSS3的出现使得样式表的功能变得越来越强大，而某种意义上也可以说它让我们开发起来越来越容易了。CSS3里虽然有很多重量级的新特征出现——例如transitions, animations, 和 transforms，但有一个特征虽然不是那么抢眼，但却是非常的有用，它就是content和attr表达式

HTML5无疑是当前最受宠的一项技术，每个web设计者都在热烈的讨论这种神奇的标记语言的兴起。HTML5是一种学起来毫不费力的标记语言，但它却能提供迷人的、富有艺术性的特征，帮助web设计人员完成他们的构思想象。HTML5对于一个设计人员来说能毫不费力的理解，轻松的掌握。

自从Wordpress自带的主题上放置了一个可以伸缩的搜索框后，这种效果的文本域在新兴的网站上出现的越来越多。实现这种效果其实很简单，鼠标点击下面的搜索图标，你会看到搜索框出现，并慢慢变长。使用简单的几行CSS就能完成它，当然，前提条件是，你要使用支持CSS3的现代浏览器，比如谷歌浏览器，火狐浏览器。

背景动画如果用的恰当，会给网页带来意想不到的效果。在过去，我们只能用flash或Javascript来实现。幸运的是，CSS3的流行使得我们完全可以使用它来实现这种效果，不在依赖其它编程技术。一段简单的CSS代码就能轻而易举的达到下面的效果。

提示：将鼠标放到立方体上，会发现更炫的动画效果。(用谷歌浏览器观看效果最佳) 前后上下左右

如何用纯CSS画出一个三角形图案 假设这有一个方块。 方块有一个上边框。 还有其它三个边。 注意这些边框在方块 […]

提示：点击清空画面。  

慢悠悠的云

提示：在画布上移动你的鼠标。