一个简单的HTML5 canvas层拖动示例演示代码
一个简单的HTML5 canvas 层拖动示例演示代码，打开效果后，能看到一个方块在屏幕中央，鼠标按住这个方块可向四周拖动，不过设定了可拖动的范围，当溢出这个范围的时候，方块就不见了，拖出了允许的范围，我们可以看到canvas定义了这个区域为600*400像素。
View ArticleHTML5+Jquery仿苹果手机的面板合拢折叠效果
这是一个HTML5折叠菜单，但更像是一个折叠面板，仿苹果手机的passbook应用中的代码例子，请在火狐或chrome下浏览。不知道有没有听说过手机琴菜单，觉得这一个从形式上来说，是挺像的。
View Articlehtml5 canvas撞球实例演示
html5 canvas撞球动画示例 碰撞检测，演示过程中，在页面上始终显示FPS AVG: 84.61 CUR: 83.42 number:1等信息，可定义缓冲和不缓冲，点击“buffer”后可看到，很多小球在无规则运动，撞到边缘会自动弹回，对canvas的理解有帮助。
View ArticleCSS3实现文本框中的占位符演示
CSS3和HTML5或许是对应的吧，这个CSS3占位符，演示在一个input输入框内，丝毫不受鼠标点击的影响，看上去就不错，代码也简洁，占位明显，大家想想可以用来干什么？实现文本框提示相当不错吧？可惜IE不支持本效果。
View Article采用css3实现的语言提示框
CSS3兼容性是个大问题，期待IE早日升级啊，这么漂亮的效果竟然IE8不支持。CSS代码里有一句ie的滤镜注释，那是ie的阴影滤镜。再此提示，transform属性并非css3独有，svg，canvas中也都有实现，当然他们的写法非常类似。代码里还要用到transform中的skew。
View ArticleJS实现的图片上传预览功能
Js实现图片上传前的预览功能，主要是使用html5 的 Files API实现，ie可兼容部分功能，在火狐和chrome下正常运行。HTML5的 file input标签支持multiple 和 accept ，前一个属性可控制多文件选择，后一个控制上传的文件类型。预了解更多关于File API的资料，有自己查下。
View ArticleJS打造Win8风格的瀑布流效果
Win8觉得成功的就是混搭的方格子瀑布流桌面效果，呵呵，或许其它高级功能我没玩过，觉得XP还是我的最爱。当Metro上线的时候，就激起了无数的模仿者，现在在WEB设计界，也早见到过这种效果了，但想为你网站增加瀑布流布局效果的，你可要好好学习一下这款HTML5代码了。
View ArticleJS+canvas生成忍者镖旋转动画
html5 canvas 生成忍者镖旋转动画，代码已经是最精简了，水平有限，至此，熟悉了一下 canvas动画的实现，为喜欢HTML5的提供一份参考代码，希望与大家共同努力，共同提升前端开发水平。
View ArticleCSS实现文字3D旋转特效
一个基于HTML5的网页文字3D旋转动画效果，支持中文和英文字符，浏览请注意要使用支持CSS3技术的浏览器，比如Opera、Chrome等，主要结合transition 和 animation来实现，参考性更高。
View ArticleJS仿Photoshop钢笔工具(贝塞尔曲线可视化操作)效果
不得不佩服本代码作者，再次对分享代码表示敬佩和感谢。贝塞尔曲线的可视化操作演示，用过PhotoShop的都知道吧，铅笔工具也是一重要的工具，当我看到作者用HTML5模拟出铅笔工具的时候，我真的很惊讶哦，模拟的真像呀。在屏幕中点击并可拖动，你可控的点有4个，其核心是画贝塞尔曲线，但是鼠标可控。
View ArticleHTML5 canvas实现的IE9图标旋转效果(大风车动画)
一个纯正的HTML5页面效果，用IE浏览器图标模拟的大风车转啊转效果，不要以为IE图标是图片！！难度在于，里面的所有东西都不是图片，而是用canvas写的，你佩服我没有用，你应该佩服HTML5的canvas引擎，好好感谢它吧。
View Articlehtml5+css3实现矩形变形效果
这是一个CSS3效果，IE9以下用户看不到效果，推荐使用火狐和Chrome浏览器，使用translate——移动、rotate ——旋转、scale——缩放实现的功能，对于transform方法的使用，其实很难把握，所以写了这个演示，或许对你有帮助。
View ArticleHTML5下的input元素type=range属性演示
有很多实用的HTML5网页特效可以用，但现在IE9以下挺杯具，本演示代码对input元素的type做了扩展，type=”range”便是其一。测试看效果，请选用chrome/safari/opera浏览器。
View ArticleCSS3实现图片阴影效果(鼠标移上放大图片)
一个CSS3图片链接效果，并且给图片加上边框阴影的漂亮效果，有人把这种效果称为“图片呼吸灯”，当鼠标移到图片上的时候，图片会瞬时放大显示，像是在“呼吸”，鼠标移走后则图片恢复原始大小，可作为一个图片列表的显示效果，用于图片站、旅游风景站或产品站都可以哦。因CSS3技术所以测试请用Chrome或火狐。
View ArticleHTML5+JS打造的3D球视觉特效
再回首，那只小球已停止转动——HTML5 3D球效果，炫丽的3D球视觉效果，测试前请先激活，小球大小可随时设定，可控制小球向上、向下、向左、向右转动，代码里的自定义参数也比较多，比如X/Y方向上的密度和速度、数学角度、各方向上的偏移量、存储的像素点等。
View Article【牛X】纯CSS3打造的叮当猫图案
CSS3/HTML5代码实例，实现一个可爱的叮当猫图案，如果浏览器不支持CSS3的话，也是可以显示出猫的图案，不过效果当然不如支持HTML5的浏览器，比如火狐、Chrome下表现完美，学习CSS3或HTML5你可不要错过哦。
View ArticleCSS3实现的图片动态交互效果
基于HTML5的的动态交互效果，CSS3代码实例，鼠标移到Logo图片上，渐变渐入显示第二张图片，加入了的动画效果就是使用CSS3技术实现的，没有使用任何的JavaScript代码。
View Article纯CSS3打造的圆角气泡框
html5圆角气泡提示框，可用于评论对话框、留言或聊天对话框，框中的箭头是制作亮点，也是难点，用传统CSS也可实现，不过用HTML5中的CSS3更容易实现，本代码列举了不同开头方向的提示框样式，便于用户选择使用，也方便学习参考。
View Articlecss3实现图片过滤效果
css3图片过滤效果，鼠标放上后其它图片模糊，鼠标所在位置的图片是清淅的，有效索引出当前的图片，对图片的模糊处理是本特效的亮点，你完全可以将模糊的效果应用于其它的图片特效中，你同样也可借此代码研究一下HTML5中的CSS3技术。
View Article