three+bokeh实现彩色圆点动态视觉差异交互背景文字效果代码-html代码-BFW代码库

three+bokeh实现彩色圆点动态视觉差异交互背景文字效果代码

代码语言：html

代码描述：three+bokeh实现彩色圆点动态视觉差异交互背景文字效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
@import url("https://fonts.googleapis.com/css2?family=Festive&display=swap");

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: 110px;
  //text-transform: uppercase;
  font-family: "Festive", cursive;
  filter: drop-shadow(0 0 10px rgba(0, 100, 100, 0.7))
		drop-shadow(0 0 30px rgba(0, 100, 100, 0.5))
		drop-shadow(0 0 50px rgba(0, 100, 100, 0.3));
  animation: gradientMove 10s ease infinite, float 3s ease-in-out infinite;
}

#app a {
  text-decoration: none;
  color: #fff;
}

#app canvas {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#fullscreenBtn {
  position: fixed;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

#fullscreenBtn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

#app h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	background: #1a1a1a;
	color: #fff;
	font-size: 120px;
	font-family: "Festive", sans-serif;
	font-weight: 900;
	-webkit-text-stroke: 2px black;
	color: transparent;
	background: linear-gradient(
		45deg,
		#ff0000,
		#ff7300,
		#fffb00,
		#48ff00,
		#00ffd5,
		#002bff,
		#7a00ff,
		#ff00c8
	);
	background-size: 400% 400%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: gradientMove 10s ease infinite, float 3s ease-in-out infinite;
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5))
		drop-shadow(0 0 30px rgba(255, 255, 255, 0.........完整代码请登录后点击上方下载按钮下载查看