将 WebGL 动画作为背景

2022-06-09 316

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 大家好我是FLy哥，又到了周末了，这次分享的文章不是很长，如果你正在或者将来会涉及到你的博客，就是如何在正常的网页中加入酷炫的3D效果：图片webgl 动画上面的3D动画其实就是整个网页的背景，然后你的html 页面还是正常写的，互不干涉，其实还就是一个字，让自己的页面看着更加花里胡哨的图片花里胡哨我们看看如何解决吧？？？有 2 种方法：方法1将画布的 CSS 属性 position 设置成 fixed#canvas { position: fixed; left: 0; top: 0; z-index: -1; ...}并将 z-index 设置成 -

大家好我是FLy哥，又到了周末了，这次分享的文章不是很长，如果你正在或者将来会涉及到你的博客，就是如何在正常的网页中加入酷炫的3D效果：

640 (8).gif

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>

将 WebGL 动画作为背景

方法1

方法2

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

将 WebGL 动画作为背景

方法1

方法2

热门文章

最新文章

相关电子书