> 移植自 GitHub 高星开源项目 · 纯 HTML/CSS 实现_

效果实验室

从 GitHub 上星数最高的前端效果项目里,把招牌效果移植过来供对比。喜欢哪个,就可以应用到主页和详情页。

01.入场动画animate.css · ~81k★

来源:animate-css/animate.css —— 全网使用最广的 CSS 动画库。点击按钮重播。

bounceIn 弹入 flipInX 翻转 zoomIn 缩放
02.悬停特效Hover.css · 29.4k★

来源:IanLunn/Hover —— 经典 CSS3 悬停效果合集,鼠标放上来试试。

grow 放大 sink 下沉 sweep 扫光 buzz 抖动 glow 辉光
03.粒子连线背景particles.js · ~29k★

来源:VincentGarreau/particles.js —— 最经典的粒子背景库,此处为 ~60 行精简移植版。

移动鼠标,粒子会跟随连线
04.滚动显现(三方向变体)ScrollReveal · 22.5k★

来源:jlmakes/scrollreveal —— 主页时间线同款思路的进阶版:左侧滑入 / 翻转进入。

↓ 从下方浮入(主页当前同款) ← 从左侧滑入 ⤢ 翻转进入
05.CSS 艺术特效iCSS · 20.7k★

来源:chokcoco/iCSS —— 中文社区最艺术的 CSS 合集:流光边框 / 流光文字 / 立体字 / 虚线流动。

conic-gradient 流光描边卡片(@property 驱动)
流光扫过文字 SHINE 立体字 3D TEXT
06.纯 CSS 加载器SpinKit · ~19.6k★

来源:tobiasahlin/SpinKit —— 最著名的纯 CSS 加载动画合集,全部零图片零 JS。

plane 翻面
double 弹跳
wave 波浪
cubes 翻滚
three 波点
07.打字机效果Typed.js · ~16k★

来源:mattboldt/typed.js —— 网站标语打字机效果的事实标准。

ai@week:~$
08.鼠标视差景深parallax.js · ~11.2k★

来源:wagerfield/parallax —— 分层景深跟随鼠标,此为精简移植版。

L1 深
L2 中
L3 浅
L4 最深
09.点击爆裂粒子mo.js · ~18.6k★

来源:mojs/mojs —— motion 效果引擎,招牌 burst 爆裂特效的 canvas 精简移植版。

👆 在这个区域任意点击,炸一发试试