在web端，要让一个元素按照特定的路径运动，在之前，基本上只能借助于SVG SMIL animation来实现，但是，随着浏览器的发展，CSS代码也能实现这样的功能，本文就将介绍如何使用CSS中的offset-path属性让元素沿着不规则路径运动。有demo有截图还有gif演示，总之，希望本文的内容能够对您的学习有所帮助。
了解CSS属性font-kerning,font-smoothing,font-variant
2017年02月23日 by 阅读 34748 次, 今日 2 次本文很简单，了解几个可能平时用得不太多，长得不太熟的font相关的几个CSS属性，分别是：font-kerning, font-smoothing和font-variant。
“蝉原则”与CSS3随机多背景随机圆角等效果
2017年02月17日 by 阅读 38576 次, 今日 4 次在web设计或交互实现的时候，随机效果是非常常见的，比如说我们希望我们动画看上去运行的是更随机，则可以把动画分解为多个维度，例如水平移动，垂直移动以及旋转缩放等，然后不停的循环，然后很关键的一点就是每个维度动画循环的时间遵循“蝉原则”，这样最后实现动画效果就显得非常随机以及丰富等。
小tips: 页面链接跳转历史URL不记录的兼容处理
2017年02月15日 by 阅读 52354 次, 今日 6 次我们点击首页的“分类”进入分类页，然后分类页头部有个“男生”“女生”的频道切换，这两个都是直接的链接，如果就会带来这么一个问题，如果用户在“男生”“女生”的频道之间反复切换，则当我们点击左上角的返回按钮（如下图）的时候，就会发现点击很多次还是在“分类页”上，这其实是不符合用户预期的，正常的用户预期应该是点击左上角的返回按钮应该直接回到首页，而不是还在当前页过家家。
要实现思路并不难，就是“男生”“女生”频道切换的时候，URL地址不要进入历史URL记录堆栈，但如何实现同时保证各个浏览器都兼容是个问题，本文就将展示相关的实践，希望对大家的学习能够有所帮助。
基于CSS3 column多栏布局实现水平滑页翻页交互
2017年02月15日 by 阅读 59897 次, 今日 6 次column多栏布局和flex弹性布局基本上是同一时间段出现的，从兼容性来讲，column多栏布局一直以来更稳定更兼容，而flex弹性布局前前后后历经多个版本，直至现在有些移动设备支持依然不好，但是两者的命运却截然相反，column多栏布局鲜有人问津，而flex弹性布局则风生水起。面试的时候，就算面试者并未在实际项目中使用过flex弹性布局，也会时不时扯到这东西上来，好像不提flex布局就跟时代脱节一样，其实完全没有必要，每个CSS属性都有它的潜力和价值所在，挖掘其内在价值而不是单纯的被外在的那层表现困于庐山才是真正想要看到的。
而本文就是通过挖掘column多栏布局潜力实现了看上去很棘手的交互效果，这里特异分享给大家，希望能够对大家的学习有所帮助~
开源移动端元素拖拽惯性弹动以及下拉加载两个JS
2017年01月25日 by 阅读 55292 次, 今日 6 次开源两个起点中文网M站两个动效交互JS，封装良好，即插即用。一个是任意元素屏幕拖移外带惯性边缘弹动效果，另外一个是基于窗体的下拉释放加载刷新效果。
基于VoiceOver的移动web站无障碍访问实战
2017年01月20日 by 阅读 31530 次, 今日 5 次所谓“无障碍访问”，指的是各类设备均可以无障碍访问。例如鼠标、键盘、读屏软件或设备等。
ARIA全称“Accessible Rich Internet Applications（可访问的富互联网应用）”。
VoiceOver是苹果设备上的读屏软件，当开启VoiceOver后，交互行为和通常行为是不一样。并且和ARIA属性之间的关系也比较深，本文就将通过项目实战展示基于VoiceOver的移动端ARIA特性和注意事项。
分享一个即插即用的私藏缓动动画JS小算法
2017年01月17日 by 阅读 59157 次, 今日 2 次……实际开发的时候，使用的最多的还是最初的那个她，不仅是因为她给我带来了很多美好的回忆，更重要的是这么多年过去了，她一直保持着那份简单，和外面的那些妖艳*货完全不一样。
而这个相伴自己最久，最无法忘怀的、使用最多的她就是本文要分享的私藏的动画小算法……
HTML5语音合成Speech Synthesis API简介
2017年01月13日 by 阅读 70195 次, 今日 3 次HTML5中和Web Speech相关的API实际上有两类，一类是“语音识别(Speech Recognition)”，另外一个就是“语音合成(Speech Synthesis)”，这两个名词听上去很高大上，实际上指的分别是“语音转文字”，和“文字变语音”。各有作用，各有千秋，兼容性也有差异……
我的应用
我的应用