将 WEBGL 动画作为背景
大家好我是FLy哥，又到了周末了， 这次分享的文章不是很长，如果你正在或者将来会涉及到你的博客，就是如何在正常的网页中加入酷炫的3D效果：
上面的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>
复制代码上次的博客网站， 忘记留地址了， 我的，兄弟们，
博客还是关于自己的所写的一些文章， 可视化系列
[个人博客点击跳转] wzf1997.github.io/learn-visua…
这次的地址在底下阅读原文， 最近在写canvas 系列， 还在规划写什么，大家想看什么可以加我微信 给我点建议！！！ 谢谢啦，周末快乐
\