当前web届，绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏，然而，这种布局有一个存在一个影响用户体验的隐患。应该都知道，现代浏览器滚动条默认是overflow:auto类型的，也就是如果尺寸不足一屏，没有滚动条；超出，出现滚动条。于是，问题来了，当内容加载从不足1屏到超过1屏，页面就会跳动！有没有什么好办法呢？本文就将介绍一个简单实用的技能tips, follow me…
小tip:CSS vw让overflow:auto页面滚动条出现时不跳动
2015年01月25日 by 阅读 199738 次, 今日 79 次内容loading加载后高度变化CSS3 transition体验优化
2015年01月22日 by 阅读 78284 次, 今日 3 次现在web技术不断发展，视图与数据渲染更多由前端呈现，后台更多与数据打交道。于是，我们会经常看到这样的交互场景。页面加载，看到一个框框里面有个菊花在转，然后内容呈现；或者点击个按钮，菊花在转，然后列表动态加载呈现。
确实，功能上OK，有菊花，用户也愿意等。但是，大家有没有觉得所有交互，出现菊花→出现内容，都是“砰砰砰”很生硬的感觉，尤其当内容是动态，高度不确定的时候。我们使用一些比较好的手机APP(如微信)的时候一定不会有这样的感觉，整个交互流程都是很流畅的，就像山涧的泉水，涓涓细流到山脚，而不是巨人在峡谷走路的感觉。
所以，如果菊花的呈现到内容的展示能够通过自然的动画过渡呈现，势必会增强用户体验。
而本文就将分享，我是如何渐进处理，让动画过渡呈现更自然的…… 必须的，demo，截图，源代码展示一个不少，希望本文的内容能够对您的学习有所帮助。
再说CSS3 animation实现点点点loading动画
2014年12月28日 by 阅读 87483 次, 今日 19 次以前介绍过一种方法实现打点loading动画效果，但是那个方法不健壮，机缘巧合，让我重新思考有没有更好的方法。而本文分享的就是自己想到了2个全新的实现方法，兼容各大小浏览器。
本文不仅有demo，源代码展示，还特意制作了多种gif效果演示帮助理解，相信本文的内容会对你的工作有所帮助的！
CSS3 cursor属性值zoom-in/zoom-out,grab/grabbing实例
2014年12月22日 by 阅读 52030 次, 今日 9 次CSS3的领域范围已经渗透到了cursor属性（鼠标手形）。这里简单介绍两个相当实用的组合zoom-in/zoom-out以及grab/grabbing.
本文重在展示，开阔眼界，一如既往，有demo，有截图，有必要的源代码展示，总之，希望本文的内容能够对您的学习有所帮助。
CSS3/SVG clip-path路径剪裁遮罩属性简介
2014年12月22日 by 阅读 97566 次, 今日 12 次CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类，还有很重要的一个分支：SVG属性家族！
所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置。本文的clip-path就是其中一个属性，可以游走于SVG属性和CSS属性之前。本文中等篇幅，中等难度，丰富的源代码展示，丰富的demo页面，丰富的截图，还有必要的gif演示，总之，希望本文的内容能够对您的学习有所帮助！
SVG-Morpheus实现SVG图标图形间的补形动画
2014年12月14日 by 阅读 38320 次, 今日 10 次如何实现矢量图形之间的过渡动画效果呢？可不可以像以前的flash那样，知道前后图形，直接创建中间的补间动画呢？有，当当当当，就是本文要介绍的SVG-Morpheus! 一如既往，有demo页面、有丰富的截图，有必要的源代码展示，不仅如此，本文还有swf效果展示， MP4视频效果展示以及gif截图效果。总之，希望本文的内容能够对您的学习有所帮助。
小tip:CSS计数器+伪类实现数值动态计算与呈现
2014年12月7日 by 阅读 74786 次, 今日 8 次内容如题，重在展示，以及开拓眼界，拓宽思路。与通常该调调的文章类似，有demo，有源代码展示，还有必要的截图。总之，希望本文的内容能够对您的学习有所帮助。
翻译：慢点更好-为何排序比速度更重要？
2014年12月7日 by 阅读 31592 次, 今日 6 次我们平时都关注网页性能，或许还忽略了一个很重要的东西，元素的排序。很多时候，如何让页面元素以合适的排序呈现要比页面加载速度更重要。本译文的主要思想就是这个，欢迎围观。
PSD小图标变身SVG Sprites/font-face历险记
2014年12月2日 by 阅读 59161 次, 今日 17 次结语摘要：SVG是以后图形领域重要的媒介，如何导出适合开发的SVG图形是设计师必备技能，本文的填色等处理都是比较重要的处理细节；页面仔对图形软件使用不一定很熟，尤其illustrator，本文就拿一个比较复杂的图标举例，演示了如何迁移以及优化SVG路径。实际开发时候，一般的PSD中的小图标路径都是简单正常的，不需要“相减”或“联集”等路径操作。所以，弄清楚了本文的操作，基本上图标SVG变身都不是什么问题。
技术发展，以后肯定会出现PSD一键SVG转换工具的，本文内容就要作古了，或许现在就有，哪位小伙伴有所耳闻的，不妨分享下~~
我的应用
我的应用