前言

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

之前一直在玩 three.js ，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在 CSS 中也用上这些数学函数，但发现 CSS 目前还没有，据说以后的新规范会纳入，估计也要等很久。

然而，我们可以通过一些小技巧，来创作出一些属于自己的 CSS 数学函数，从而实现一些有趣的动画效果。

让我们开始吧！

前言

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

上周末刚在原神里抽到了“火花骑士”可莉，于是就心血来潮，想用 three.js 来实现一种火系的特效，不是炸弹的爆炸，而是炸弹爆炸后在草上留下的火花效果

游戏里的效果相对比较卡通化，而本文的效果将更加逼近现实一点

让我们开始吧！

前言

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

本文我们将用 three.js 来实现风暴云特效，以下是最终实现的效果图

让我们开始吧！

前言

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

本文我们将用 three.js 来画个炫彩液晶球，以下是最终实现的效果图

让我们开始吧！

前言

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

本文我们将用 three.js 来模拟出太阳的动画效果，以下是最终实现的效果图

让我们开始吧！

前言

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

以下是最终实现的效果图

撒，哈吉马路由！

前言

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

平时我们见过很多的图片悬浮和滚动特效，大部分是用 CSS 和 SVG 实现的，但是有一种特效它们绝对实现不了——扭曲特效。为何？CSS 擅长直线型变换，而 SVG 擅长曲线型变换。扭曲特效则两者都不是，它是像素级变换，能做到像素级变换的只有 canvas，而 webgl 的片元着色器其实特别擅长这一点，我们可以利用它来实现各种酷炫的扭曲特效。以下是最终实现的效果图

撒，哈吉马路由！

前言

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

本文我们将用 three.js 来实现一种很酷的光学效果——露珠滴落。我们知道，在露珠从一个物体表面滴落的时候，会产生一种粘着的效果。2D 平面中，这种粘着效果其实用 css 滤镜就可以轻松实现。但是到了 3D 世界，就没那么简单了，这时我们就得依靠光照来实现，其中涉及到了一个关键算法——光线步进（Ray Marching）。以下是最终实现的效果图

撒，哈吉马路由！

前言

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

之前在逛国外网站的时候，发现有些网站的文字是刻在 3D 图形上的，并且能在图形上运动，视觉效果相当不错，于是笔者就也想用 three.js 来尝试复现出这种效果

上图只是所有效果的其中之一，接下来让我们一起开干吧~

前言

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

粒子动画，指的是许多微粒在某个空间内做出有序或无序的运动，并且颜色大小也能按照一定规律进行改变的动画。而本文要实现的，正是一种粒子按着路径发光移动的效果