这是一款纯原生技术的 CSS 特效合集页,基于 HTML+CSS+原生 JavaScript 实现,不依赖任何框架或动画库。页面串起五种当下常见的视觉玩法:clip-path 切片错位配关键帧做出的 RGB 故障字、多层高斯模糊光斑漂移形成的极光背景、用 @property --angle 让锥形渐变绕边框旋转的玻璃拟态卡片、悬停时字符乱码逐位归位的 scramble 文字,以及 canvas 径向渐变跟随鼠标的聚光灯区域;外加一个双层跟随、带混合模式反色的自定义光标和滚动进场动画。
标题写"纯 CSS"其实略微夸张,故障字、极光、锥形描边确实是 CSS 独立完成的,但乱码文字、3D 倾斜、聚光灯和光标插值都还是靠 JS 在跑——这不影响它的参考价值,反倒把"哪些该交给 CSS、哪些必须 JS"划得很清楚,是拿来学习和抄样式的好素材。要注意 @property 和 backdrop-filter 在老旧浏览器上会直接降级,玻璃卡片会变成普通半透明块;另外自定义光标在触屏设备上没有意义,建议按设备类型关掉。源码里还留了一段滚动数字递增的逻辑,但当前页面没有对应节点,可当作现成模块直接复用。
适用于前端特效学习与素材参考、个人作品集首页、技术博客与开源项目主页、暗色调科技风落地页等场景。