幽灵文字特效,SVG 湍流置换做出的绿色鬼影标题

幽灵文字

幽灵文字特效,SVG 湍流置换做出的绿色鬼影标题

深色背景上一行绿色大字,边缘被湍流不断揉动,向上拖出一层飘散的荧光,像在冒鬼气。

基于CSS+JS实现的 3D 磨砂玻璃卡片堆叠特效,可拖拽滑走切换的层叠卡组

3D卡片堆叠

基于CSS+JS实现的 3D 磨砂玻璃卡片堆叠特效,可拖拽滑走切换的层叠卡组

四张磨砂玻璃卡片前后叠成一摞,把最上面那张往左右一拖就滑走,后面的卡自动补位并放大。

纯 CSS 仿 iphone 动态壁纸海浪动画背景,shape 路径驱动的沙滩浪涌特效源码

海浪动画背景

纯 CSS 仿 iphone 动态壁纸海浪动画背景,shape 路径驱动的沙滩浪涌特效源码

四层海浪线在渐变沙滩上交错推进,浪尖轮廓持续伸缩,白色浪花贴着曲线扩散,无图片、无脚本。

纯 CSS 3D 标签云,球面分布可旋转的立体词云特效源码

3D 标签云

纯 CSS 3D 标签云,球面分布可旋转的立体词云特效源码

93 个标签均匀分布在球面上持续自转,鼠标移上去暂停并让其余标签淡出,外圈还能手动转动角度。

纯 CSS 3D 图片轮播,环形排布可左右转动的立体相册

3D 立体相册轮播

纯 CSS 3D 图片轮播,环形排布可左右转动的立体相册

十一张图围成一圈立在三维空间里,点击左右两侧即可整体转动,正面那张最大最亮,无脚本。

仿 Mac 键帽按压特效,能响应真实键盘的 CSS 拟物按钮

键帽按钮

仿 Mac 键帽按压特效,能响应真实键盘的 CSS 拟物按钮

两枚仿 Mac 键帽,点击或按下键盘上对应的键都会下陷、泛起一圈水波再弹回,连底座阴影一起变。

纯 CSS 橙子插画特效|果皮纹理与滴汁弹跳Loading加载动画源码

橘子Loading

纯 CSS 橙子插画特效|果皮纹理与滴汁弹跳Loading加载动画源码

不用一张图片画出的三只橙子:果皮麻点、切面囊瓣、蒂梗和地面投影全由渐变叠出,配弹跳、叹气与滴汁三段循环动画。

纯 CSS 水面涟漪特效|同心圆环扩散的写实波纹源码

水波涟漪动画

纯 CSS 水面涟漪特效|同心圆环扩散的写实波纹源码

一百圈同心椭圆共用同一条摆动动画,仅靠逐圈递增的负延迟就形成向外扩散的水波,圈数与速度可实时切换,纯HTML+CSS实现,零 JavaScript。

360 度转盘导航特效|圆形菜单旋转选中的 CSS 交互源码

圆形转盘导航

360 度转盘导航特效|圆形菜单旋转选中的 CSS 交互源码

八个入口沿圆周排布,点哪一项整圈就转到顶部指针下;按钮自身反向旋转始终保持水平,跨过起点也永远走最短的一边。

CSS position-anchor菜单指示器跟随手指动画源码下载

菜单指示器

CSS position-anchor菜单指示器跟随手指动画源码下载

六项菜单竖排,悬停时右侧手指指示器自动锁定当前项,`anchor-name` + `position-anchor` 原生 CSS 定位。

React Motion鼠标拖动图片拖尾弹簧动画效果源码

图片拖尾

React Motion鼠标拖动图片拖尾弹簧动画效果源码

鼠标每移动阈值距离就掉落一张倾斜的图片,弹簧入场 1 秒后消散,AnimatePresence 管理生命周期。

团队成员展示墙,CSS锚点定位悬停高亮特效

团队介绍页

团队成员展示墙,CSS锚点定位悬停高亮特效

鼠标移到哪位成员,高亮块就平滑滑到哪里,切角造型配头像与职位信息,纯CSS实现零脚本,适合团队介绍与关于我们页面。