V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Dlad
V2EX  ›  程序员

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

  •  
  •   Dlad · Jul 2, 2025 · 2028 views
    This topic created in 298 days ago, the information mentioned may be changed or developed.

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

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

    天天问大模型,搜索能力都下降了
    我找到这个,以为要自己写雾气-_-||
    https://github.com/rocksdanister/rain.git
    moefishtang
        5
    moefishtang  
       Jul 2, 2025 via Android
    做一个 GIF ,作为背景
    zsh2517
        6
    zsh2517  
       Jul 2, 2025
    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
       Jul 3, 2025
    感谢~
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   851 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 21:52 · PVG 05:52 · LAX 14:52 · JFK 17:52
    ♥ Do have faith in what you're doing.