SuperAPI AI 工具集

web-weather-creator

前端与建站

查看项目

更新于 10-15 20:30

技能介绍

用途:用 SVG 滤镜链配合 CSS 动画,在网页中实现风格化大气与天气效果。核心是 feTurbulence 生成噪声,再经 feDisplacementMap、feGaussianBlur、feDiffuseLighting、feComposite 组合,形成云、波浪、雾等有机形态。

主要能力:云(积云、卷云、层云、风暴云、卡通云)、水与波浪(海浪、涟漪、浅滩、倒影)、闪电(stroke-dashoffset 绘制、全屏闪光叠加、分支路径生成)、雨(CSS 自定义属性雨滴、强度预设、风雨倾角)、雾与地雾(多层漂移、密度变量)、暮色天空渐变、极光、耶稣光、镜头光晕、海沫等。

使用方式:定义 SVG filter 并施加到元素;用多层半透明层做视差(back/mid/front),前层低透明度并加 mix-blend-mode(soft-light 或 screen);容器设 isolation: isolate,效果层必须 pointer-events: none;可用 mask-image 为内容留出清晰区域。云用 fractalNoise,水用 turbulence,波浪把 baseFrequency 设为 X 远小于 Y。

适用场景:博客或产品页的动态背景、品牌视觉、游戏或叙事页面气氛、氛围类落地页。不适合写实渲染(应走 WebGL/Three.js)、静态天气图标、天气数据 API 和 3D 体积效果,这些不在本技能范围内。

限制与数据缺口:资料仅说明效果本身的质量定位与参数建议,未提供 npm 包名、安装命令、具体 API、浏览器兼容性说明、许可证、收费或价格信息,也未给出完整项目结构;上述内容暂未提供。