Glass
玻璃镜片跟随指针并折射实时页面。悬停在标题或按钮上时，会像水晶球一样放大内容。
html-in-canvas
演示图片
Move the lens over the photo to magnify every detail.
安装
本地演示保留原有效果，背景替换为 LeiBox 选定的画面。
查看原作者 ↗代码
源码与许可说明请查看原作者页面。
查看原作者 ↗API 参考
| 属性 | 类型 | 默认值 |
|---|---|---|
shape镜片形状："circle"、"square" 或 "rectangle"。 | "circle" | "square" | "rectangle" | "circle" |
size镜片尺寸，单位为 CSS 像素；圆形为半径，矩形为半高。 | number | 120 |
aspect矩形形状的宽高比（1 至 3）。 | number | 1.7 |
corner正方形及矩形的圆角半径，单位为 CSS 像素。 | number | 32 |
ior玻璃折射率（1 至 2），值越高边缘对光线的弯折越强。 | number | 1.5 |
edge镜片边缘开始弯折前保持光学平坦的比例（0 至 1）。 | number | 0.7 |
bevel镜片边缘弯曲的锐度（1 至 10）。 | number | 4 |
depth光学深度，单位为 CSS 像素：玻璃悬浮于页面上方的距离，决定折射位移的大小。 | number | 250 |
aberration边缘色差强度（0 至 3），0 关闭光谱分离。 | number | 1 |
blur玻璃表面的磨砂模糊程度（0 至 4），0 保持光学清晰。 | number | 0 |
reflection边缘菲涅耳反射的强度（0 至 2），0 关闭。 | number | 1 |
shine镜面边缘高光（0 至 2），使镜片在纯色背景上仍可见；0 关闭。 | number | 0.01 |
zoom悬停目标元素时的放大倍数（1 至 3），类似水晶球。 | number | 1.5 |
targets触发悬停水晶球放大的元素 CSS 选择器。 | string | "[data-glass-target]" |
follow镜片跟随光标的速度（0 至 1），1 表示紧贴。 | number | 0.2 |
className应用到包装元素的 CSS 类。 | string |