刮刮卡是大家非常熟悉的一种网页交互元素了。实现刮涂层的效果，需要借助canvas来实现，想必每个前端工程师都清楚。实现刮刮卡并不难，但其中却涉及很多知识点，掌握这些知识点，有助于我们更深刻理解原理，对于提升举一反三的能力很有帮助。本期以实现刮刮卡为例，分享下如何科学合理地封装函…

horizontal-tb：默认值，表示水平排版，从上到下。 vertical-lr：表示垂直排版，从左到右。 vertical-rl：表示垂直排版，从右到左。 至此，我们数字滚动效果已经初步实现了，在下一节中我们将会逐步完善此效果，以满足业务需求。

周报将 Web 动画大致分为三类：CSS 动画、SVG 动画 和 WebGL/Canvas 动画。所有的动画将按类别展示，方便读者有针对性的学习。 1. 《3D 折叠收据》 作者：Kriszta 一个制作很精美的 CSS 3D 折叠动画。被折叠的部分其实是两个伪元素，这样可以减…

双十一光棍节又要来临了，每年这个时候都是本人最苦闷的时刻。日渐消瘦的钱包，愈发干涸的双手，虽然变强了，头却变凉了。今年一定要搞点事情！ 最近听女神说想谈恋爱了，✧(≖ ◡ ≖) 嘿嘿，一定不能放过这个机会，给她来个不一样的表白。 作为整天搞可视化的前端攻城狮，最先想到的就是常玩…

在项目中自己使用 Canvas 实现了一下水波图，在这里给大家分享一下它的实现原理。 一开始看到波浪，可能不知道从何入手，我们来看看波浪的特征就会有灵感了。 没错，有人肯定会想到，就是 正余弦曲线！对于波陡很小的波动，一般选择正弦或余弦的曲线来表示波形，这是最简单而又最接近实际…