滚动自动轮播
纯 CSS 实现的图文主题卡片无限循环自动滚动+悬停暂停交互效果这是一款基于纯CSS技术实现的卡片自动轮播效果，通过边缘渐隐遮罩营造出沉浸式的无限滚动体验，无需JavaScript即可实现自动滚动和交互暂停功能。界面的核心设计在于视觉边界处理：轮播容器的左右...
渐入动画
基于CSS mask遮罩技术实现的9款富友创意地图片、卡片渐入动画集合这是一组基于CSS mask遮罩技术实现的渐入动画效果，借助 CSS 等技术，能呈现包括从左滑入、从上滑入、从底部擦入、从顶部擦入、螺旋中心展开、全屏擦入、中心生长和边缘生长等多种富有创意的渐入...
遮罩切割图片
CSS图片遮罩裁剪分割特效，悬停时恢复图片原始状态这是一款动态图像遮罩效果，基于CSS mask-image 和 过渡动画 实现，悬停时通过渐变、形状切割裁剪或混合模式实现视觉变换，适用于作品集、相册或产品展示的交互增强。
渐变模糊层
CSS渐进模糊遮罩页眉效果，用于图文页面效果更佳！这是一款渐进模糊蒙层遮罩效果，当滚动图文页面时，页面的顶部区域会被一层渐变模糊的遮罩所遮挡，标题会放置于遮罩之上。这款效果基于CSS遮罩（mask）技术实现，通过渐变的模糊效果突出焦点区域，适用...
缺口输入框
CSS双向缺口输入框，带有挖空区域的创意输入框这是一款通过CSS的mask遮罩效果实现的带有缺口圆角的创意输入框，两个带缺口的输入框连接到一起，结合部位放置了双向箭头，可用于输入位置或其他相互之间有交集的文本及符号。
纹理背景
HTML结合纯CSS渐变与遮罩效果合成的21种绚丽的卡片背景纹理图案这是一款包含21种绚丽纹理效果的卡片背景图案集合，常见的卡片纹理图案都是基于纯CSS技术实现，利用CSS渐变和遮罩合成技术创造出简单而紧凑的元素卡片背景图案。无需SVG或额外图像资源，仅依靠CS...
旋转加载
SVG + CSS轻量级旋转太阳Loading加载中效果一款外形酷似太阳旋转且具有延迟和渐变遮罩效果的个性预加载器，其中「光线」等素材是通过SVG矢量图实现的，旋转收缩渐变效果是通过CSS实现的。非常轻量级简约的一款Loading加载中动画。
缺角图片
使用 CSS 的 mask 蒙层属性设置 border-radius 实现缺角图片效果使用 CSS 的 mask 遮罩效果，以最少的代码创建倒置半径角。无额外元素、无伪元素、仅使用 CSS 变量进行实现，单个效果如下图所示，您可以在此效果的基础上进行组合再创作实现更多有创意的效果。