内容简介：

最近，在看 LPL 比赛的时候，看到这样一个有意思的六芒星能力图动画：

今天，我们就来使用纯 CSS 实现这样一个动画效果！
实现背景网格
对于如下这样一个背景网格，最好的方式当然肯定是切图，或者使用 SVG 路径。

如果一定要使用 CSS，勉强也能做，这就涉及了不规则图形边框效果，我们有一些方式可以实现，可以参考一下这几篇文章：

现代 CSS 高阶技巧，不规则边框解决方案
有意思！不规则边框的生成方案

这里，我们可以使用 drop-shadow()，大致实现一下这个效果，核心步骤：

通过叠加实现一个六边形图形
利用 drop-shadow() 实现边框效果

用动图演示一下，大概是...

查看原文

👉 英雄联盟比赛选手的六芒星能力图动画是如何制作的？