起因 最近看到掘金上有朋友用three.js实现了一个soul星球效果，觉得很有意思，想用CSS复刻一下！ 前置概念！🤠 首先CSS默认在二维平面 (x, y) 上操作： x 轴：对应于水平方向。 y

① 基于rem 适配（推荐，也是本篇要实现的方案） 适用场景：不固定宽高比的Web应用，适用于绝大部分业务场景 ② 基于 scale 适配 适用场景：固定宽高比的Web应用，如大屏或者固定窗口业务应用

本文使用 View Transition API 实现 Element-Plus 主题切换动画，通过 CSS 变量和动态 clip-path 实现点击扩散效果。

一行核心代码即可使用 CSS 滤镜的方案实现暗黑模式主题，性价比是非常高！兼容性也不差，尤其适合已经开发完毕的大型网站进行暗黑模式切换，强烈推荐！

CSS Grid的功能远比我们想象的要强，很多人对Gird布局仅仅局限于了解或者一知半解，殊不知它是CSS语言中最牛逼的部分之一

让我们用CSS的关键帧动画来实现一个超酷炫的《星球大战》（Star Wars）开场效果。和我一起来原力觉醒吧！！

文章中给出了数据大屏效果实现的两种方案，方案都有自己的局限性，我们要学会选择适合自己的方案，来实现系统平台的大屏效果。

几乎每个前端开发都应该用过这个滑动组件库吧？这就是大名鼎鼎的swiper.js 当然我也不例外，确实非常全面，也非常强大。 不过很多时候，我们可能只用到了它的10%不到的功能，显然是不划算的，也会有性

演示环境 效果预览 ps：前段时间在做大屏系统的时候，客户要求把加载图标做成他们的logo、而且要有动画，看起来高大上；我脑子里有两种方案：自定义Loading组件（推荐）、魔改Elenet Plus