Frost
在实时页面上覆盖冰层。悬停可融化出孔洞，移开后冰霜会重新凝结。
html-in-canvas
演示图片
Hover across the photo to melt a hole through the ice.
安装
本地演示保留原有效果，背景替换为 LeiBox 选定的画面。
查看原作者 ↗代码
源码与许可说明请查看原作者页面。
查看原作者 ↗API 参考
| 属性 | 类型 | 默认值 |
|---|---|---|
frost在冰霜图案上叠加的基础冻结覆盖量。 | number | 0.05 |
strength冰霜噪声图案的倍数，值越高冻结越多。 | number | 0.7 |
contrast冰霜噪声图案的对比度。 | number | 3 |
crispness最终冰霜遮罩的对比度，值越高边缘越清晰。 | number | 1 |
highlight混入冰霜的闪烁颗粒量。 | number | 0.3 |
highlightStrength闪光趋向白色的着色强度。 | number | 0.8 |
haze内容上方的基础模糊雾层，即使不在厚霜区域也存在。 | number | 0.5 |
tintThin薄冰霜区域的颜色，使用 [r, g, b]，范围为 0 至 1。 | [number, number, number] | [0.82, 0.86, 1.05] |
tintThick厚冰霜区域的颜色，使用 [r, g, b]，范围为 0 至 1。 | [number, number, number] | [0.92, 0.96, 1.1] |
tintStrength冰霜着色影响冻结区域的程度。 | number | 0.3 |
saturation冰霜下内容的饱和度倍数。 | number | 1.2 |
brightness冰霜下内容的亮度倍数。 | number | 0.85 |
refraction冰面弯折光线的程度，0 关闭。 | number | 1 |
ior冰的折射率，水冰约为 1.31。 | number | 1.31 |
detail折射中细微表面细节的强度。 | number | 2 |
textureScale冰面浮雕图案的缩放，值越高特征越大。 | number | 2 |
fresnel掠射角下折射的菲涅耳增强程度。 | number | 0.8 |
meltRadius光标下方融化区域的半径。 | number | 0.25 |
meltNoise融化边缘的不规则程度，0 为完整圆形。 | number | 0.25 |
meltStrength悬停融化冰霜的速度。 | number | 0.75 |
refreeze已融化区域重新冻结的速度，0 表示不再冻结。 | number | 2 |
edgeFade保持冰面边缘冻结的强度，0 允许全部融化。 | number | 0.1 |
meltEdges允许冰面的冻结边缘也融化。 | boolean | true |
introDuration加载时冰霜从边缘生长所需的秒数，0 关闭。 | number | 2.5 |
opacity冰霜层的整体透明度，值越低显示的内容越多。 | number | 0.6 |
shimmer高光颗粒的动态闪烁，0 为静态。 | number | 0 |
quality模糊渲染的分辨率倍数（0.25 至 1）。 | number | 1 |
className应用到包装元素的 CSS 类。 | string |