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

3D卡片堆叠

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

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

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

海浪动画背景

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

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

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

3D 标签云

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

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

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

3D 立体相册轮播

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

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

CSS corner-shape 电子门票特效,悬停撕开票根的异形圆角卡片

电子票根

CSS corner-shape 电子门票特效,悬停撕开票根的异形圆角卡片

鼠标悬停时票根从主票旁撕开,中间的虚线孔位随之隐去,整张票微微抬起。纯 CSS,无脚本。

3D 东南西北折纸特效,Three.js 自动演示带流程图的童年互动 HTML 小游戏

折纸东南西北

3D 东南西北折纸特效,Three.js 自动演示带流程图的童年互动 HTML 小游戏

一张会开合的纸质「东南西北」在桌面上自动演示,右侧同步生成流程图,记录每一步选了什么。

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

键帽按钮

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

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

相机光圈快门特效,Canvas 绘制的十叶片可开合光圈动画

相机光圈

相机光圈快门特效,Canvas 绘制的十叶片可开合光圈动画

十片快门叶片围成光圈盖住照片,鼠标左右移动即可控制开合大小,勾选后还能看到几何辅助线。

3D 丝带磨砂卡片特效,纯 CSS 与 SVG 打造的立体缎带质感装饰丝带组件

丝带卡片

3D 丝带磨砂卡片特效,纯 CSS 与 SVG 打造的立体缎带质感装饰丝带组件

一条缎带横跨磨砂玻璃卡片,两端垂下燕尾,带弧度的刺绣文字随绸面起伏,悬停时整卡轻微后仰。

拉杆瞄准击球碰撞进袋的纯 DOM HTML打台球小游戏源码

台球小游戏

拉杆瞄准击球碰撞进袋的纯 DOM HTML打台球小游戏源码

按住白球拉出方向杆,松手即击出:球沿角度滑行、撞库反弹、球球相撞传递动能,落袋后收进球袋,一键重新开局。

关键词筛选图片画廊|主图上滑切换的全屏相册源码

背景虚化画廊

关键词筛选图片画廊|主图上滑切换的全屏相册源码

输入关键词即时筛选缩略图,点缩略图后新主图从下方滑入、旧图上移让位,背景同步换成同一张照片的大幅虚化版。

CSS+JS 实现的 T 恤图案换色预览特效|遮罩贴合的服装花色试穿 HTML 源码

衣服花色切换

CSS+JS 实现的 T 恤图案换色预览特效|遮罩贴合的服装花色试穿 HTML 源码

点色卡即换布料花纹:图案被遮罩裁进衣身轮廓,再叠一层褶皱阴影,看上去像真印在衣服上,切换带淡入淡出。