![图片[1]-HTML+CSS 模糊渐变圆形浮动霓虹背景 含源码](https://pic.turnfish.top/images/2024/11/25/HTMLCSS--.gif)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<style>
body,html,#app{margin:0;width:100%;height:100%;}#app{overflow:hidden;touch-action:pan-up;color:#ffffff;font-family:'Montserrat',sans-serif;text-shadow:0 0 5px #ffffff,0 0 20px #000,0 0 30px #000;display:flex;justify-content:center;align-items:center;}#app h1{font-size:60px;text-transform:uppercase;}#app a{text-decoration:none;color:#fff;}#app canvas{display:block;position:fixed;top:0;width:100%;height:100%;z-index:-1;}
</style>
<body>
<div id="app">
<canvas id="webgl-canvas"></canvas><div id="hero"><h1></h1></div>
</div>
</body>
<script type="module">
import { Bokeh1Background } from 'https://cdn.jsdelivr.net/npm/threejs-components@0.0.2/build/backgrounds/bokeh1.cdn.min.js'
const bokeh1Background = Bokeh1Background(document.getElementById('webgl-canvas'))
bokeh1Background.loadMap('https://cdn.jsdelivr.net/npm/threejs-components@0.0.2/build/assets/bokeh-particles2.png')
bokeh1Background.setColors([0x6d4862, 0xfd826c, 0x22ccc1])
document.body.addEventListener('click', () => {
bokeh1Background.setColors([0xffffff * Math.random(), 0xffffff * Math.random(), 0xffffff * Math.random()])
})
</script>
</html>© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![百度网盘直链解析彻底解除百度云限速限制[利用IDM工具在线解析网页版]-MOHE素材库-设计行业的乐园，各类素材的矿山！](http://mohe-sc.com/wp-content/uploads/2021/07/baiduwangpan-400x273.png)
会员专属
会员专属
![关于本站启用[注册邀请码]的说明-MOHE素材库-设计行业的乐园，各类素材的矿山！](https://www.mohe-sc.com/wp-content/uploads/2022/10/2023_09xI0Dxg_-800x448.png)
请登录后查看评论内容