酷酷的大侠

衡量web页面的性能有fp、fcp、DCL等指标，但是这些指标并不是很好理解，本文从实验的角度还原了这些事件出现的时机，为后面做性能优化提供了理论基础。

代码不言自明。 Game.init()加载图片和Canvas对象，本游戏有5个Canvas对象，具体用途我们在后面图层章节进行说明。 点击网页上的开始按钮，调用start方法。start方法加载地图，并画到canvas上。 0是墙壁，1是可以走的路径。可以简单的改变数据，生成不…

大家好，这里是 UX（交互体验设计师）& 前端开发，并且还喜欢画画的 yuki！@yuneco。 在这篇文章里，为了能够更加轻松地去使用 Vue 和 css animation，基础的部分，将会跟大家一步步的详细解释。目标如下图↓所示，用 JavaScript 自由的控制动画。…

一般遇到动画第一反应是使用gif动态图，由UI小姐姐直接做好gif放到页面上就可以了。但是在这个需求中，动画是运行在半透明弹出层上，而gif不支持alpha通道，而且在本页面的需求中需要在动画结束后进行后续的逻辑操作，gif不能有效的监听动画完成事件。 首先，去github仓库…

CSS是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非…

这是我参与更文挑战的第7天 先看效果： 更长看视频 实现： 添加标签底层盒子，再直接暴力添加10个气泡标签： 添加底层盒子样式，宽高等： position: fixed; 相对于浏览器窗口进行定位。

在移动端，浏览器切到后台，页面的定时器就被暂停了，重新打开浏览器时，倒计时才继续执行，这就导致倒计时执行时长变长了。 一个页面有多个倒计时，比如商品列表的开售倒计时，当页面打开停留较长时间后，会发现有的商品倒计时会不准确。 定时器被暂停是因为浏览器将页面的线程停止了，毕竟浏览器…

第一次尝试选择了我比较熟悉的 PixiJS，关于我如何用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片，可以 戳这里查看。 有了第一次失败的经历，果断老实选择使用 three.js 来实现 3d 效果。 但为什么选择使用 CSS3DRenderer 实现，可…

会将连续排列的 inline-block 节点聚合新建一个空白的 div 插入原先的位置然后将这些 inline-block 节点作为 children 插入其中. 4.再次计算盒模型 width(setWidth)，会结合 margin，border 等 css 属性再次计算…