水獭 Otter

水獭 Otter

一整座用 Canvas UI 搭起来的展示站。三十三种效果，一页一境，光标轻轻走过就会改写画面。

进入效果目录

品牌首屏

点进任一卡片，单独感受这一项 Canvas UI。

HTML-IN-CANVASParticleReveal尘粒在光标处重新聚成清晰界面。 HTML-IN-CANVASLiquid指针拖出流体，页面在波纹里轻轻弯折。 HTML-IN-CANVASGlass玻璃透镜跟着指针，像真实折射。 HTML-IN-CANVASClouds雾气盖住页面，光标划开云层。

流体与玻璃

点进任一卡片，单独感受这一项 Canvas UI。

HTML-IN-CANVASBubble玻璃水珠跟着指针，折射出虹彩与霜感。 HTML-IN-CANVASDroplets雨滴顺着屏幕滑落，折射背后的页面。 HTML-IN-CANVASFrost霜花在表面蔓延，指针会擦出清晰窗。 HTML-IN-CANVASRipple点击激起水面般的涟漪。 OBJECTLiquidObject液态表面的三维物体，光影跟着流动。 OBJECTGlassObject玻璃质感的三维物体，在工作室里漂浮。

结构与粒子

点进任一卡片，单独感受这一项 Canvas UI。

HTML-IN-CANVASGrid整页拆成 3D 瓷砖，光标一过就起涟漪。 HTML-IN-CANVASHexFloat六边形浮砖随光标抬起落下。 HTML-IN-CANVASParticleScroll滚动时下方化作沙尘，再重新拼回。 OBJECTParticleObject模型拆成可交互粒子云。 HTML-IN-CANVASShatter玻璃碎片抬起并折射背后的内容。 HTML-IN-CANVASPeel掀开一层，露出底下另一面。 HTML-IN-CANVASClothHTML 挂在风里的布上，指针会掀起褶皱。

氛围与能量

点进任一卡片，单独感受这一项 Canvas UI。

HTML-IN-CANVASBlaze从底边升起火花、烟雾与热浪扭曲。 HTML-IN-CANVASFlameWrap给内容围上一圈火沿，边缘熔融发光。 HTML-IN-CANVASForceField能量护盾铺开，点击会炸开折射冲击波。 HTML-IN-CANVASLaser激光束切开并扫描页面。 HTML-IN-CANVASGlyphRain字形像雨一样落下，盖住又散开。

扭曲与扫描

点进任一卡片，单独感受这一项 Canvas UI。

HTML-IN-CANVASDisplacement位移网格从光标荡开，边缘带色散颗粒。 HTML-IN-CANVASBend上下边像立方体翻折，滚动时页面跟着弯过去。 HTML-IN-CANVASMagnify科幻放大镜跟着指针，带色散与点击涟漪。 HTML-IN-CANVASAsciify光标附近的页面，会改写成会呼吸的字符画。 HTML-IN-CANVASDecryptReveal乱码在光标前解码，波前闪回清晰界面。 HTML-IN-CANVASCanvas页面被画上纤维布纹、颗粒与半调网点。

复古与故障

点进任一卡片，单独感受这一项 Canvas UI。

HTML-IN-CANVASGlitch故障色块与撕裂线掠过页面。 HTML-IN-CANVASVHS磁带噪点、扫描线与色偏。 HTML-IN-CANVASRetroDither复古抖动镜头跟着指针扫过。 OBJECTAsciiObject把模型或图片变成跟着轮廓生长的 ASCII 字形。 OBJECTDitheredObject模型或图片以 Bayer / 半调抖动呈现。
加载中…