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

33 天前
 Dlad

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

1468 次点击
所在节点    程序员
7 条回复
weixind
33 天前
madaochen
33 天前
控制开 Source raindrop-fx-master ,里面的源码都没有混淆,下载下来流程跑一下就知道了
javalaw2010
33 天前
rainymood 也是用的这个开源项目:raindrop-fx https://github.com/SardineFish/raindrop-fx
Dlad
33 天前
感谢楼上各位大佬!

天天问大模型,搜索能力都下降了
我找到这个,以为要自己写雾气-_-||
https://github.com/rocksdanister/rain.git
moefishtang
33 天前
做一个 GIF ,作为背景
zsh2517
33 天前
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
32 天前
感谢~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1142570

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX