如何实现一个充满科技感的官网（二）

背景 #

在上一篇文章《如何实现一个充满科技感的官网（一）》中，我们初步了解了该官网的整体设计，并与大家探讨了它的视觉呈现和用户体验。

我们前期的内部设计偏向简洁，所以开始思考如何提升网站的整体设计感。这些尝试便由此展开。

网站地址：https://infinilabs.com/

如果你对动态背景的实现感兴趣，这篇文章将带你深入探索，揭秘如何从零打造一个兼具美感与功能性的企业官网！

技术选型 #

前端框架：Next.js
UI 框架：基于 Tailwind CSS
CSS 样式：Tailwind CSS（快速开发、内置响应式、丰富工具类）

为什么选择 Next.js？ #

兼容团队技术栈：基于 React，便于团队协作。
SEO 和性能优化：支持服务端渲染（SSR）和静态站点生成（SSG）。
路由强大：支持动态路由和文件路由，灵活易用。
内置优化：图片优化、国际化、多种性能提升。
动态内容支持：博客、新闻等动态场景轻松应对。
加载体验佳：用户体验和页面加载速度表现优秀。

动态的背景方案 #

动态背景可以显著提升视觉吸引力，以下是常用实现方案：

CSS 动画背景：使用纯 CSS 实现动态背景，通过 @keyframes 配合渐变色、位置移动等属性。
动态 Canvas 背景：使用 <canvas> 元素，结合 JavaScript 绘制动态效果，比如粒子系统、波浪效果等。
动态视频背景：使用 <video> 元素播放循环视频作为背景。
WebGL 动态背景：使用 WebGL 库（如 Three.js）渲染 3D 动态背景。
动态粒子背景：使用现有的粒子背景库快速实现动态粒子效果。（particles.js 或 tsparticles）
……

如何选择？ #

简单需求：纯 CSS 动画、动态视频背景。
复杂交互：Canvas 动画、WebGL 动画（Three.js）。
快速实现：使用粒子背景库（particles.js / tsparticles）。

动态背景代码实现 #

以下示例通过 WebGL 创建了一个动态背景组件，支持 React 和 Tailwind CSS。

创建 GlobalBackground.tsx 文件：

"use client";

import dynamic from "next/dynamic";
import { Suspense, useEffect, useState } from "react";
import { Layout } from "./Layout";

const ShaderGradient = dynamic(
  () => import("shadergradient").then((mod) => mod.ShaderGradient),
  { ssr: false }
);
const View = dynamic(() => import("./View").then((mod) => mod.View), {
  ssr: false,
  loading: () => (
    <div
      className="w-full h-full bg-cover bg-center"
      style={{ backgroundImage: "url(/images/loading-bg.png)" }}
    ></div>
  ),
});

export default function GlobalBackground() {
  const defaultProps: any = {
    control: "props",
    animate: "on",
    brightness: 1.2,
    cDistance: 3.6,
    cameraZoom: 1,
    color1: "#0600B8",
    color2: "#9000E3",
    color3: "#0B004F",
    // embedMode: "off",
    envPreset: "city",
    // gizmoHelper: "hide",
    grain: "off",
    lightType: "3d",
    reflection: 0.1,
    shader: "defaults",
    type: "waterPlane",
    uSpeed: 0.2,
    uTime: 0,
    wireframe: false,
    zoomOut: false,
    toggleAxis: false,
  };

  const [suspenseWebgl, setSuspenseWebgl] = useState(false);
  useEffect(() => {
    const canvas = document.createElement("canvas");
    const gl =
      canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    if (gl) {
      // 浏览器支持 WebGL
      console.log("The browser does support WebGL");
      setSuspenseWebgl(true);
    } else {
      console.log("The browser does not support WebGL");
      // 浏览器不支持 WebGL
    }
  }, []);
  return (
    <>
      {suspenseWebgl ? (
        <Layout>
          <View className="w-full h-full">
            <Suspense fallback={null}>
              <ShaderGradient {...defaultProps} />
            </Suspense>
          </View>
        </Layout>
      ) : null}
    </>
  );
}

创建 Layout.tsx 文件：

"use client";

import { useRef } from "react";
import dynamic from "next/dynamic";
const Scene = dynamic(() => import("./Scene"), { ssr: false });

const Layout = ({ children }: any) => {
  const ref = useRef<any>();

  return (
    <div
      ref={ref}
      className="fade-in"
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        zIndex: -1,
        overflow: "auto",
        touchAction: "auto",
      }}
    >
      {children}
      <Scene
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          pointerEvents: "none",
        }}
        eventSource={ref}
        eventPrefix="client"
        pixelDensity={1}
        pointerEvents="none"
      />
    </div>
  );
};

export { Layout };

创建 Scene.tsx 文件：

"use client";

import { ShaderGradientCanvas } from "shadergradient";
import { Canvas } from "@react-three/fiber";
import { Preload } from "@react-three/drei";
import tunnel from "tunnel-rat";

const r3f = tunnel();

export default function Scene({ ...props }) {
  // Everything defined in here will persist between route changes, only children are swapped

  return (
    <ShaderGradientCanvas {...props}>
      {/* @ts-ignore */}
      <r3f.Out />
      <Preload all />
    </ShaderGradientCanvas>
  );
}

创建 View.tsx 文件：

"use client";

import { forwardRef, Suspense, useImperativeHandle, useRef } from "react";
import {
  OrbitControls,
  PerspectiveCamera,
  View as ViewImpl,
} from "@react-three/drei";
import tunnel from "tunnel-rat";

const r3f = tunnel();

const Three = ({ children }: any) => {
  return <r3f.In>{children}</r3f.In>;
};

export const Common = ({ color }: any) => (
  <Suspense fallback={null}>
    {color && <color attach="background" args={[color]} />}
    <ambientLight intensity={0.5} />
    <pointLight position={[20, 30, 10]} intensity={1} />
    <pointLight position={[-10, -10, -10]} color="blue" />
    <PerspectiveCamera makeDefault fov={40} position={[0, 0, 6]} />
  </Suspense>
);

const View = forwardRef(({ children, orbit, ...props }: any, ref) => {
  const localRef = useRef<any>(null);
  useImperativeHandle(ref, () => localRef.current);

  return (
    <>
      <div ref={localRef} {...props} />
      <Three>
        <ViewImpl track={localRef}>
          {children}
          {orbit && <OrbitControls />}
        </ViewImpl>
      </Three>
    </>
  );
});
View.displayName = "View";

export { View };

直接在 app/page.tsx 使用背景组件：

import GlobalBackground from "@/components/GlobalBackground";

export default function Home() {
  return (
    <>
      <GlobalBackground></GlobalBackground>
      <div
        className="min-h-screen bg-cover bg-center"
        style={{ backgroundImage: "url(/svg/bg_n.svg)" }}
      >
        ....
      </div>
    </>
  );
}

当然，代码弄好了，要想让代码运行起来，还需要安装一下依赖：

pnpm add @react-three/drei @react-three/fiber shadergradient tunnel-rat

通过这些步骤，你将能够为网站实现高性能、响应式的动态背景效果。根据具体需求调整背景类型和交互复杂度，让你的官网更具吸引力！

效果 #

具体效果，可以直接在网站上浏览，效果更真实。网站地址：https://infinilabs.com/

分享 #

如果你也想配置自己的动态效果图，可以前往 shadergradient.co 网站进行自定义设置。完成后，将生成的配置参数复制到 GlobalBackground.tsx 文件的 defaultProps 中，即可实现属于你自己的动态背景效果。

参考 #

福利 #

INFINI Labs一直致力于为开发者和企业提供优质的开源工具，提升整个技术生态的活力。除了维护国内最流行的分词器 analysis-ik 和 analysis-pinyin，也在不断推动更多高质量开源产品的诞生。

最近新开源的产品和工具：

INFINI Framework https://github.com/infinilabs/framework
INFINI Gateway https://github.com/infinilabs/gateway
INFINI Console https://github.com/infinilabs/console
INFINI Agent https://github.com/infinilabs/agent
INFINI Loadgen https://github.com/infinilabs/loadgen
INFINI Coco AI https://github.com/infinilabs/coco-app

以上开源软件都可以在 Github 上面找到： https://github.com/infinilabs

希望大家都能给个免费的 Star🌟 支持一下！！！

Rain9

路漫漫其修远兮，吾将上下而求索！

· TDBC 2025 大会聚焦 AI 与数据库融合，极限科技发布新一代 Coco AI 搜索平台 · 极限科技 Coco AI 荣获 2025 首届人工智能应用创新大赛全国一等奖 · 搜索型数据库的技术发展历程与趋势前瞻 · 极限网关助力好未来 Elasticsearch 容器化升级 · 国产搜索引擎崛起：Elasticsearch 国产化加速

· 极限科技开源赞助计划：欢迎开源项目申请支持 · 探索低空经济“关键一跃” —— 技术如何驱动商业落地线上研讨会圆满举办 · 极限科技荣膺 2025 金猿奖 — “年度国产化优秀代表厂商”，自主可控搜索方案 Easysearch 获行业高度认可 · 极限科技 Coco AI 荣获 2025 IT168 技术卓越奖 - 创新产品奖 · APM（三）：监控 Python 服务链 · INFINI Labs 产品更新 | Coco AI v0.10 × Easysearch v2.0 联袂上线：UI 全面重构，体验焕然一新 · Easy-Es 2.1.0-easysearch 版本发布 · APM（二）：监控 Python 服务 · 🔥 程序员爆哭！我们让 COCO AI 接管 GitLab 审查后，团队直接起飞：连 CTO 都说“这玩意儿比人靠谱多了” · APM（一）: Skywalking 与 Easyearch 集成

2026 x

开源 x

赞助 x

开源生态 x

社区 x

低空经济 x

商业化 x

Easysearch x

数据分析 x

金猿奖 x

国产化 x

搜索引擎 x

Coco AI x

技术卓越奖 x

创新产品奖 x

IT168 x

APM x

Skywalking x

产品更新 x

Easy-Es x

Coco x

AI x

GitLab x

代码审核 x

人工智能 x

石油石化 x

performance x

Gitee x

投票 x

Meilisearch x

Rust x

轻量级 x

搜索百科 x

Docker x

Docker Compose x

Easyserach x

Console x

DevOps x

Elasticsearch x

国产替代 x

backup x

snapshot x

CCR x

Gateway x

esdump x

source_reuse x

ignore_above x

OpenSearch x

AWS x

Lucene x

Solr x

Easyearch x

发明专利 x

数据分区 x

国际专利 x

一等奖 x

人工智能应用创新大赛 x

bulk x

embedding x

OpenAI x

IK x

TDBC x

2025 x

信通院 x

可信数据库大会 x

搜索型数据库 x

中国数据库产业图谱 x

上海开源创新菁英荟 x

开源创新新星企业 x

Workshop x

AI 搜索 x

智能助手 x

Automation x

Logstash x

MongoDB x

开源中国 x

直播 x

merge x

Elasticsearch 9 x

GitCode x

AI搜索 x

Cloud x

rollup x

Kubernetes x

Operator x

Arm64 x

Snapshot x

S3 x

Grafana x

Opensearch x

Nginx x

直播活动 x

搜索客社区 x

Meetup x

ES x

企业搜索 x

DeepSeek x

RAG x

certificate x

windows x

Rollup x

TopN x

Filebeat x

Ubuntu x

请求限速 x

INFINI Console x

指标 x

Kibana x

多集群 x

client x

Spring Boot x

ECE x

ES Bulk x

vector database x

Postgres x

可搜索快照 x

SDK x

官网 x

Web 开发 x

Next.js x

React x

Three.js x

Metrics x

Helm x

filter x

querycache x

practice x

Agent x

localStorage x

响应式 x

时间组件 x

时区组件 x

极限科技 x

三周年 x

周年庆 x

国家高新技术企业 x

校园招聘 x

湖北工业大学 x

Tauri x

Web 开发人员 x

桌面应用开发 x

桌面端 x

Electron x

Pizza x

认证培训 x

报名 x

Scrapy x

爬虫 x

Rust开发者大会 x

docsearch x

文档搜索 x

Easyseach x

有奖征文 x

黑神话悟空 x

EKS x

征文系列 x

跨集群搜索 x

科技中小企业 x

白皮书 x

Python SDK x

数据库产业图谱 x

超大规模 x

分布式集群 x

写入限流 x

2024可信数据库发展大会 x

创新型中小企业 x

搜索数据库 x

正排索引 x

免费许可证 x

K8S x

DTC2024 x

实时搜索 x

ES国产化 x

Redis x

OOM x

测试 x

内存 x

趋势 x

AI绘画 x

Stable Diffusion x

Diffusion x

Model x

GAN x

语义搜索 x

知识图 x

向量数据库 x

中国信通院 x

星河（Galaxy） x

标杆案例 x

鲲鹏 x

鲲鹏技术认证 x

客户端 x

日志平台 x

LDAP x

Loadgen x

中国一汽 x

国内数据库 x

墨天轮 x

监控系统 x

集成测试 x

ZSTD x

Helm Charts x

国产适配 x

兆芯 x

Linux x

LoongArch x

信创适配 x

二维拆分算法 x

中国移动云 x

Vault x

加密 x

安全工具 x

kNN x

向量检索 x

图片搜索 x

Alerting x

SQL x

搜索 x

Embedding x

可信数据库 x

统信 x

海光 x

龙芯 x

restore x

Arm x

大数据企业证书 x

移动云大会 x

信通院产品评测 x

国内首家 x

数据可视化 x

北京软协 x

第十届理事会会员单位 x

Apache Arrow x

宣传片 x

大会分享 x

多集群管理 x

无缝数据迁移 x

Loadrun x

INFINI Gateway x

log4j x