前言

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

之前在练习写粒子特效的时候发现有些特效的实现跟物理知识有很大的关系（比如烟花特效），后来又碰巧发现了一本神书——The Nature of Code，它教你如何运用物理数学知识来模拟实现一些自然界的特效，读完后我的创作之魂被彻底激发，于是就有了这篇文章，它将带你从零开始实现一个由物理驱动的粒子特效。

以下是最终实现的效果图

让我们开始吧！

前言

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

最近开始玩起了 p5.js，发现这是一个很有意思的库，用它能创作出各种新奇有趣的特效，本文我们将一起来实现下图的鼠标移动特效。

让我们开始吧！

前言

大家好，这里是 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）。以下是最终实现的效果图

撒，哈吉马路由！