上周我做了个demo，使用SVG实现了一个彩条圆环倒计时效果，使用SVG实现的优点是兼容性非常好，不足在于学习成本比较高，于是我就琢磨有没有更简单的方法实现类似的多彩圆环渐变效果，最好纯CSS就能搞定。绞尽脑汁想出了下面三种实现方法……
客栈说书：CSS遮罩CSS3 mask/masks详细介绍
2017年11月6日 by 阅读 113946 次, 今日 30 次CSS mask遮罩属性目前除了IE和Edge浏览器不支持，Firefox，Chrome以及移动端等都已经全线支持，其实际应用价值已不可同日而语。尤其Firefox浏览器，从版本55开始，已经全面支持了CSS3 mask属性。并且mask属性规范已经进入候选推荐规范之列，会说以后进入既定规范标准已经是板上钉钉的事情，大家可以放心学习，将来必有用处。
CSS3 linear-gradient线性渐变实现虚线等简单实用图形
2017年10月27日 by 阅读 62136 次, 今日 16 次我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景，也就是背景图片个数可以无限累加，正好CSS3的gradient渐变性质是background-image，于是，我们可以实现任意数量渐变背景图的叠加效果。甚至，理论上，任意彩色jpg图片都是可以使用CSS3渐变背景实现的。
当然我们实际开发的时候，是不会使用CSS3渐变来模拟一张图片的，更多是用来生成一些简单实用的图形。
本文就将通过实现虚线，三角以及加号减号等案例，展示下CSS3 linear-gradient线性渐变要图形生成技巧。
Chrome opacity非1时border-radius圆角边框剪裁问题
2017年10月19日 by 阅读 33847 次, 今日 13 次border-radius:50%可以让元素正方形元素表现为正圆，如果元素设置了border边框，则会表现为一个正圆圈圈，但有时候，border边框的这个圈圈会在边缘处发生剪裁，不是一个完美的圈圈了，这是如何发生的呢？
鼠标无限移动 JS API Pointer Lock简介
2017年10月18日 by 阅读 40715 次, 今日 15 次用一句话说明Pointer Lock API的作用就是：Pointer Lock API可以让你的鼠标无限移动，脱离浏览器窗体的限制！
这对于一些需要鼠标控制的应用非常有用。举个例子：某3D VR女友的游戏，你鼠标向上移动，则你的视角就会往下……
before(),after(),prepend(),append()等新DOM方法简介
2017年09月28日 by 阅读 41436 次, 今日 11 次接下来要介绍这些新增的DOM API方法，都比较新，其设计目的是可以像jQuery那样，使用非常简单的api，便利的操作dom元素。
这些api包括：before()，after()，replaceWith()，append()，prepend()……
借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海
2017年09月19日 by 阅读 66999 次, 今日 13 次iPhone X造型上有个显著的特质，就是有个明显的刘海。
然后，也出现了一些酷酷的交互，例如页面滚动的时候，列表会自动绕着iPhone X的刘海排列。看微博评论，好像觉得这个效果实现很难，实际上，CSS3里面针对这种特定形状环绕的效果已经支持很久了，CSS3 Shapes和CSS3 Regions都是可以实现的，本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。
移动页面加速google的AMP和百度的MIP简介
2017年09月10日 by 阅读 37792 次, 今日 13 次google先出了个AMP – Accelerated Mobile Pages（加速的移动页面），后来百度仿照出了个MIP- Mobile Instant Pages – 移动网页加速器。那这些新技术对我们的产品收益有帮助吗？对我们产品开发有什么影响呢？
使用canvas实现和HTML5 video交互的弹幕效果
2017年09月10日 by 阅读 74866 次, 今日 17 次本文展示两个使用canvas实现弹幕效果的案例。其中一个效果是静态的弹幕数据固定的无限循环的效果，适合在个人博客或者运营页面，这种非视频场景使用；另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果，也就是真视频弹幕效果。
我的应用
我的应用