今天分享一个由@aemkei等大佬制作的只有348个字节的吃豆人小游戏，如上面动图所示，基本实现了游戏的主要功能，来看看大佬们是如何通过这么短的代码实现整个游戏的效果吧。

本文翻译自 A Better Frontend Component Structure: Component Trees，作者：William Bernting， 略有删改。自很久以前遵循互联网上的建议以来，我一直采用了某种“能工作就行”的组件结构。场景让我们首先想象一个简化的前端应用程序目录结构，如下所示： {代码...} 问题所在上面的简单应用程序结构很难解释这些组件之间...

如图所示，这是一个炫酷的文本渐变效果，如同冰岛的极光一般。本次的文章让我们逐步分解代码，了解其实现原理。基于以上动图效果可以分析以下是本次动效实现的主要几点：文本中有多个颜色的动画每个颜色显示的半径不同，有大有小整体动画是有规律的重复进行着实现过程接下来开始正式的代码实现过程，通过以上可以分析出...

如图所示这是一个纯本文时钟效果，和传统的时钟不一样，没有表盘，也没有完整到每一分钟的数字表示当前时刻。在这个时钟中，当前时间通过文本显示，显示的文本时间误差为+/- 4分钟，以明亮的颜色突出显示当前时间，而其余字母则较暗。实际上这是一个实现很复杂的时钟，因为只使用CSS实现，JS只需要获取初始化的时间，如...

在开发中可能有遇到过屏幕录制的需求，无论是教学、演示还是游戏录制，都需要通过屏幕录制来记录和分享内容。一般在App内H5页基于客户端能力实现的较多，现在浏览器中的 MediaRecorder 也提供了这种能力。MediaRecorder 是一种强大的技术，可以在浏览器端实现屏幕录制功能。本文将介绍如何使用JS MediaRecorder 实现屏幕...

loader组件是网站的重要组成部分。它可以用在许多地方，我们需要显示的内容正在加载中。这样的组件需要尽可能简单，在这篇文章中我们将学习如何使用优化的代码创建不同的CSS加载器。

我们将使用CSS创建一个心形图案。你可能会说：“为什么又一篇关于心形的文章？已经做过很多了！“。我们不会只建立一个心形图案，我们会使用现代的CSS技巧来实现。忘记带有border-radius和rotation的伪元素。我们也将把图像转化为心形图案！

今天分享一个很有特色的按钮交互效果，保证让你停不下来，原作者是Adam Kuhn，有兴趣的可以去codepen体验，地址：codepen，本文将核心功能逐一讲解，以下是在线效果图：

四年一度的世界杯正在火热进行中，有没有熬夜看你喜欢的队伍比赛呢。在这欢庆的氛围中，我决定用代码参与一把世界杯，擦边参与，那就是用CSS画一个足球场，正常的用CSS布局肯定是非常easy的，所以决定只用一个div完成，接下来开始正文。