将 WebGL 动画作为背景
# 将 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>
上次的博客网站, 忘记留地址了, 我的,兄弟们,
博客还是关于自己的所写的一些文章, 可视化系列
这次的地址在底下阅读原文, 最近在写canvas 系列, 还在规划写什么,大家想看什么可以加我微信 给我点建议!!! 谢谢啦,周末快乐