虽然，web世界中，交互动画效果N多多，但是，很多都是约定俗成的，或者称之为“有固定套路的”。
根据David Kaneda创建的Transitions动画CSS代码，我们可以将效果归结为这几大类：slide(滑来滑去), fade(淡入淡出), flip(飞来飞去), pop(大大小小).
如居中弹框呈现与隐藏，适合pop效果；绝对定位浮动层（如智能提示下拉框，自定义时间选择控件）等的呈现与隐藏使用fade效果；幻灯片播放的广告位效果一般为slide效果；点击某商品飞入页面右下角或左上角的购物车就是flip效果（类似最新FireFox浏览器关闭标签页效果）。
而对于页面上，“展开更多|收起更多”这类交互……
“Web综合”目录存档
“更多|收起”交互中渐进使用transition动画
2012年10月19日，星期五HTML5 placeholder实际应用经验分享及拓展
2012年02月6日，星期一
目前，现代浏览器均早已支持placeholder占位符属性。好定西不用白不用啊，因此，在前年，我就将HTML5的placeholder占位符属性应用在实际项目中了。在这一年多的应用中，还是有些磕磕碰碰，在此作为经验分享下。一来加深大家与placeholder的认识，二是希望大家可以积极大胆应用一些HTML5的新特性。
然后，还要对占位符的一些应用做扩展。本文是个排得上位置的长篇，内容多而杂，不过demo啊，截图啊，实例的，代码的都很详尽，内容也都是些值得话时间咀嚼的东西…… 相信会对您的学习有所帮助的。
CSS3 pointer-events:none应用举例及扩展
2011年12月7日，星期三
pointer-events是CSS3中又一冉冉的属性，其支持的值牛毛般多，不过大多都与SVG相关，我们可以不用理会。当下，对于偶们来讲，与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto”类似，一般在一些特殊场合露一手，平时闺门不出，没什么说头。因此，一轮筛选下来，我们需要留意的只是pointer-events:none而已。
pointer-events:none是个很有意思的东西，某些情况下其精湛的表现会让人两眼发光。
pointer-events:none顾名思意，就是……
JS护航下CSS3效果的渐进增强使用
2011年07月29日，星期五
本文主要将如果借助JS即保证IE9浏览器以及FireFox等浏览器可以使用很简单的标签使用CSS3下的圆角，盒阴影效果，又能保证IE6/IE7/IE8浏览器下有兼容性的同样效果。这可以是一种比较新颖的做法，有别于传统为了兼容性牺牲CSS3的做法，也不是当下一些JavaScript CSS3库的做法。
作为观点式的文章，必定有效果良好的demo，有源代码展示，还有必要的截图。总之希望本文的内容能够对您的学习有所帮助。
HTML5自定义属性对象Dataset简介
2011年06月14日，星期二本文介绍个HTML里面的个东东——dataset，这是个DOMStringMap对象，是HTML5一种新的含有多个名-值对的交互变量。作用是用来方便地控制HTML5中自定义的data属性。由于目前支持该属性的浏览器还不是很多，想要在实际项目中大范围使用还不太现实，所以本文只简单介绍该属性。
本文提供一些帮助理解和认识的demo页面，外带一些必要的截图以及源代码展示，总之，希望本文的内容能够对您的学习有所帮助。
JS Range HTML文档/文字内容选中、库及应用介绍
2011年04月14日，星期四
本文的内容基本上是基于“区域范围对象(Range objects)”这个概念来说的。这个玩意，可以让你选择HTML文档的任意部分，并可以拿这些选择的信息做你想做的事情。其中，最常见的Range是用户用鼠标选择的内容(user selection)。
本文有不少篇幅就是讲如何将用户的这种选择转换为W3C Range或Microsoft Text Range对象。随后展示了Range相关的JavaScript库，以及JS 文本域光标处插入文字的实现——即新浪微博的插入话题功能的完整版实例展示。
本文提供必要的表格数据，源代码展示，效果截图以及demo页面，内容较多，篇幅较长。希望本文的内容能够对您的学习有所帮助。
IE矩阵滤镜Matrix旋转与缩放及结合transform的拓展
2011年03月12日，星期六IE浏览器下Matrix滤镜可以实现旋转效果早在去年1月份在“图片旋转效果的一些研究、jQuery插件及实例” 一文中就有过还算详细的介绍。这里之所以要重新嚼以前嚼过的烂叶子是因为我之前以为IE Matrix矩阵滤镜只能实现元素的旋转与拉伸，但是就在前几天发现Matrix滤镜还有元素比例缩放的功能，类似于zoom属性的功能。于是花时间折腾了一下，决定立文备忘下。
由于现代浏览器中CSS3的transform属性可以轻松实现元素的旋转以及比例改变，所以如果……
遐想：如果没有IE6和IE7浏览器…
2011年02月24日，星期四本文其实是篇“不切实际”的YY之文。YY的背景就是IE6/IE7浏览器功德圆满，已经退休回家带孙子了。YY的内容就是此背景下我们前端er们可以做的些有趣且美好的事情。本文内容其实可以换个题目就是： IE6/IE7浏览器不支持前端功能简介。文章主要列举了四个功能，其中两个JavaScript方面的，两个CSS方面的。其实更多的是介绍一些新的技术。
本文各个parts都提供必要的截图，或是文章链接；提供必要的源代码展示；JavaScript部分专门制作了很有喜感的demo页面；CSS部分提供了其他作者制作的相关demo。总之，希望本文的内容能够对您的学习有所帮助。
我的应用
我的应用