最近发现 B 站首页头图的交互效果非常有趣，本文将通过 JS 一步步复刻其效果，并详细讲解其中知识点，干货满满。

之前我尝试使用 JS 实现 B 站的首页 Banner，实现了基本1:1的复刻效果，此次中秋版本也出现了新的效果，我又跃跃欲试。。

我正在参加「掘金·启航计划， 这么久回来也没给大家准备什么好东西，带大家用CSS做一个昼夜切换的动画！时隔半年又来到掘金开始我的文章创作，不知道现在还有没人记得我这么个人🌚。不得不感叹一下在这半

一个纯css的翻书效果，出自于一位不愿意透露姓名的麻辣烫摊主。 好羡慕一个可以无忧无虑去卖麻辣烫的前端开发，嚣张中带点骚。

使用 CSS 实现打字机效果。实现打字机效果的关键是两个动画效果，文字出现的动画，和光标闪烁出现的动画。

通过css和svg实现的这么一个加载效果，重点在svg提供的一个高斯模糊的效果，从而使得看起来由明显的小球效果形成了流动的效果

本次Stable Diffusion WebUI的插件[Prompt PAI]编写还是很顺利的，耗时大概一上午。同时GET了2门AI基础技能的使用。

第一次尝试选择了我比较熟悉的 PixiJS，关于我如何用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片，可以 戳这里查看。 有了第一次失败的经历，果断老实选择使用 three.js 来实现 3d 效果。 但为什么选择使用 CSS3DRenderer 实现，可…

第一次尝试中，我使用了我比较熟悉的 PixiJS ，虽然 PixiJS 是 2D 渲染引擎，但是 pixi-projection 插件提供了 PixiJS 未来版本中 2d 和 3d 投影。 截止本文发布， 官方还没有提供 v5 的 api 。 我在之前的项目中已经使用过 Sp…