大家好我是FLy哥，又到了周末了， 这次分享的文章不是很长，如果你正在或者将来会涉及到你的博客，就是如何在正常的网页中加入酷炫的3D效果：
webgl 动画
上面的3D动画 其实就是整个网页的背景，然后你的html 页面 还是正常写的，互不干涉，其实还就是一个字， 让自己的页面看着更加花里胡哨的
我们看看如何解决吧？？？
有 2 种方法：
方法1
- 将画布的 CSS 属性
position设置成fixed
#canvas { position: fixed; left: 0; top: 0; z-index: -1; ...}
并将 z-index 设置成 -1。
这么做的缺点是，你的 JavaScript 代码必须嵌入在页面中， 并且如果你的页面很复杂，需要确保 WebGL 代码中的 JavaScript 和页面中的 JavaScript 不冲突。
方法2
- 使用
iframe
在你的网页中插入一个 iframe，例如：
<iframe id="background" src="background.html"></iframe><div> 这里是你的内容</div>
然后给 iframe 设置样式，填满窗口并且作为背景。代码几乎和上面设置画布一样，除了将 border 设置成 none，因为 iframe 默认有边框。
#background { position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; z-index: -1; border: none; pointer-events: none; }
主要是这个两个方式
源码奉上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> #bg { position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; z-index: -1; border: none; pointer-events: none; } h1 { display: block; display: flex; justify-content: center; align-items: center; } </style> <body> <iframe src="https://webglfundamentals.org/webgl/background.html" id='bg'></iframe> <h1> 欢迎来到动效世界--- </h1> </body> </html>
