前言

大家好，这里是 CSS 魔法使——alphardex。

轮播图（Carousel），相信大家并不陌生。平时大部分我们都是借助现有的框架来实现的，大都是 swiper，或者 UI 框架里的某一个小组件。于是乎这东西就开始变得千篇一律：几张图片，外加几个小点，两边各有 2 个箭头，能够点击它们进行导航，这就完了。但是，为了追求更完美的体验，我们并不能止步于此，应该发挥自己的创造力和想象力，来创造与众不同的轮播图。

注：由于代码量过大，本文将只会说实现思路，具体代码请点击 demo 链接查看。

前言

大家好，这里是 CSS 魔法使——alphardex。

切图仔，是大多数前端用来自嘲的称呼。相信很多人平时写页面的时候，大部分时间是在切图和排图，如此往复。这里并不是要否定切图本身，而是在质疑：一直切图到底对自己的功力增长有何好处？想想 UI 丢给你一套好看的界面，你却只需一个 img 标签，或者一个 background-image 属性即可搞定了它，但日后某个地方需要调整某些外观（颜色、文字等），你还不是会让 UI 再修改之前的素材，然后替换上去完事？这样就完全受制于 UI，而无法发挥自己的能动性。

那么，如何打破这个僵局？很简单，如果你 CSS 玩的够溜，你就无需再进行那枯燥无比的切图工作，那些界面、元素都是通过你双手亲自缔造而成的，尽管创作它们可能会花一些功夫，但带来的回报也是巨大的，你不仅能够自由掌控你所创造出来的元素，而且能大幅提高自己的 CSS 功力。

前言

大家好，这里是 CSS 魔法使——alphardex。

之前在 appstore 上有这样一个游戏，叫 stack（中文译名为“反应堆”），游戏规则是这样的：在竖直方向上会不停地有方块出现并来回移动，点击屏幕能叠方块，而你的目的是尽量使它们保持重合，不重合就会被削掉，叠得越多分数越高。玩法虽简单但极其令人上瘾。

碰巧笔者最近在学习 three.js——一个基于 webgl 的 3d 框架，于是乎就思索着能不能用 three.js 来实现这样的效果，以摸清那些 3D 游戏的套路。

前言

大家好，这里是 CSS 魔法使——alphardex。

“密室逃脱”这个词想必大家并不陌生，在以前的 flash 时代，这是一类很经典的益智游戏之一。玩家常常会被困在一间密室中，而过关的目的就是想法设法逃出这件密室。以下是笔者玩的最早的一个密室逃脱游戏——深红房间，它也可以说是密室逃脱类游戏的先祖。

接下来，笔者要用纯 CSS 实现一款类似的密室逃脱类游戏。

是的，你没听错，纯 CSS，也就意味着完全没有 JS 的参与。有人就纳闷了：WTF?CSS，一个网页布局的语言，居然还能写游戏？可惜的是，CSS 还真能写游戏。接下来随笔者一起进入这个不思议的国度吧。

前言

前篇传送门：猛戳这里

其实大多数的技巧前篇都已经讲完了，本文算是具有补充性质的番外篇吧 0.0

前言

大家好，这里是 CSS 魔法使——alphardex。

我对动画创作有着巨大的兴趣，平时你们能够经常在掘金的沸点上看到我创作的各种各样的动画作品。于是乎，我就决定将我所使用的各种技巧总结起来，让大家也能愉快地玩耍 CSS 动画。

好了，话不多说。让我们一起进入 CSS 动画这个领域吧！

小彩蛋：本文的标题 neta 了“化物语”，是笔者最喜欢的动画系列之一，里面的动画非常具有表现力，强烈推荐大家去看。

前提是把所有文件备份到了百度网盘上

前言

本文是我开发了许多 H5 活动后写下的小结

大家好，欢迎来到 CSS 中二魔法使 alphardex 的领域 🙌!

之前在掘金写下过 2 篇文章：「请收下这 72 个炫酷的 CSS 技巧」和「我写 CSS 的常用套路」。没过多久就受到如此多的关注，真是让我感到很意外又很惊喜。我希望这两篇文章能帮到那些希望自己能写出炫酷的特效的人以及想领略 CSS 真正的美的人。

前言

本文是笔者写 CSS 时常用的套路。不论效果再怎么华丽，万变不离其宗。