将 WebGL 动画作为背景
大家好 ，又到了周末了， 这次分享的文章不是很长，如果你正在或者将来会涉及到你的博客，就是如何在正常的网页中加入酷炫的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>「近在写canvas 系列， 还在规划写什么，大家想看什么可以加我微信 给我点建议！！！谢谢啦，周末快乐」