V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Dlad
V2EX  ›  程序员

请教一个前端视效的思路: rainymood.com 首页雾气毛玻璃效果

  •  
  •   Dlad · 30 天前 · 1462 次点击

    毛玻璃和水滴,GH 有插件可以直接实现。 这个雾气效果有点厉害,请问有什么实现思路吗?

    7 条回复    2025-07-03 12:23:18 +08:00
    weixind
        1
    weixind  
       30 天前
    madaochen
        2
    madaochen  
       30 天前
    控制开 Source raindrop-fx-master ,里面的源码都没有混淆,下载下来流程跑一下就知道了
    javalaw2010
        3
    javalaw2010  
       30 天前
    rainymood 也是用的这个开源项目:raindrop-fx https://github.com/SardineFish/raindrop-fx
    Dlad
        4
    Dlad  
    OP
       30 天前
    感谢楼上各位大佬!

    天天问大模型,搜索能力都下降了
    我找到这个,以为要自己写雾气-_-||
    https://github.com/rocksdanister/rain.git
    moefishtang
        5
    moefishtang  
       30 天前 via Android
    做一个 GIF ,作为背景
    zsh2517
        6
    zsh2517  
       30 天前
    F12 一点点删去元素(如果删错了就 ctrl+Z 撤销),最后剩一下一个 <canvas id="canvas" width="996" height="1328"></canvas> 且效果还在,并且删掉后没有效果。即和这个 canvas 有关

    然后,去网络( Network ),搜索 #canvas (# 是 id ),找到代码,没有混淆,关键内容大概下面这些。然后顺着 RaindropFX 去搜索引擎找就行了

    <script src="/raindrop-fx-master/bundle/index.js"></script>

    <canvas id="canvas"></canvas>

    const canvas = document.querySelector("#canvas");
    const raindropFx = new RaindropFX({
    canvas: canvas,
    background: "/i/bz/4.jpg",
    });

    raindropFx.start();
    Dlad
        7
    Dlad  
    OP
       29 天前
    感谢~
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2852 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 03:31 · PVG 11:31 · LAX 20:31 · JFK 23:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.