这是一个创建于 1153 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近为了提高一下自己的网站审美，在 https://www.awwwards.com/ 上浏览了很多网站，有点被震惊。 有些利用 WebGL 都可以做游戏了，感觉以后都是 canvas 的时代了，js 还得捡起来啊。
我自己肯定是做不出来这些东西，虽然有一丢丢前端基础，但是几乎可以忽略不计。但是看到一些好玩的动画效果，总想着给自己的网站也搞一个。
抛开那些非常花里胡哨的不谈，如果是简单的小动画，我该怎么模仿呢？ F12 好像也看不出什么。
就比如 https://14islands.com/ 这个网站，里面的气泡交互和最后画画的部分做的都非常好看，感觉也没难到劝退的地步。想学习借鉴一下，但也不知道从哪入手。
不知道各位前端大佬有没有比较推荐的学习方法，先在此谢过。
 |
1
rabbbit 2021-09-19 17:19:18 +08:00  1
一般都是 GSAP 或者 webgl GLSL(那些 2d 的变形很多都是 webgl), CSS Houdini
|
 |
2
Merlini OP |
 |
3
oldshensheep 2021-09-20 23:49:28 +08:00
Firefox => F12 => Debugger => Source 可以看到源码 （ Chrome 系的也行，自己试试）
大致看了一下，气泡效果是用的 https://github.com/ashima/webgl-noise 就是写个着色器，难度比较大。那个网站也是用的开源的东西 还有源码里面有 three.js 的库，应该用到了这个。 更多的去看看网站的源码吧。 |
|
4
Merlini OP @oldshensheep #3 感谢大佬。代码如果经过混淆压缩的话，是不是看了也看不出来什么东西呢。
|
Select Language