这里是 alphardex。

在现代 Web 开发中，我们常常利用特定的 HTML 标签来呈现不同形式的视觉内容：<img>用于图片，<video>用于视频。但除此之外，你知道 Web 上还能展示哪些视觉元素吗？本文将带你探索 Web 世界中的多样化视觉组件，从内容展示到炫酷特效，一览现代 Web 的视觉表现力。

在线体验

推荐访问以下网站，实时体验文中所提到的各类视觉组件：

网站地址：Visual Web Components

注意：每个组件的顶部标题均可点击，进入相应的 Demo 页可以查看更多细节和互动示例。

传统 HTML 标签

首先，让我们回顾下我们的老朋友们：<img>、<video>和<svg>。它们作为 Web 标准的基础标签，广泛被应用于各类项目中。

<img>

用于嵌入静态图片，需通过src属性来指定图像的资源路径。

<img src="/kanade.jpg" alt="Yoisaki Kanade" />

<video>

支持播放视频文件，跟图片一样，它也需通过src来指定视频的资源路径。

诸如autoplay、muted、loop等属性可以控制它的特征（自动播放、静音、循环播放等）。

<video
  src="/3rd_anv_title_03.mp4"
  alt="3rd Anniversary Title"
  autoplay
  muted
  loop
></video>

<svg>

用于绘制矢量图形，在任何分辨率下都能保持清晰。

它最核心的部分是路径<path>元素，可以构造任意复杂形状。

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 66.145832 66.145835"
>
  <!-- SVG paths and content -->
</svg>

Web Components

除了原生标签，如今也涌现出了许多优秀的 Web Components (下文简称“Web 组件”)，它们无需依赖 React、Vue 等框架，通过简单的标签声明即可实现一定的视觉效果。

<lottie-player>：播放 After Effects 动画

有的设计师会用After Effects(AE)来设计出一些复杂的动画，如果想在网页上展示它们，可以用lottie-web这个框架，而lottie-player是基于它的 Web 组件的封装版，用起来更加方便。

安装

npm i @lottiefiles/lottie-player

引入

import "@lottiefiles/lottie-player";

使用

<lottie-player
  autoplay
  loop
  src="https://lottie.host/c404786e-2d84-4239-a092-5fa55366d5a7/DRPRrsgJH4.json"
>
</lottie-player>

<spine-viewer>：渲染 2D 骨骼动画

现在市面上的很多游戏里都会有一些按照人体规律运动的 2D Q 版小人，它们的运动用到了骨骼动画 Spine。

目前网页上能渲染 Spine 动画的最常用框架是Pixi.JS，需要借助它的其中的一个插件pixi-spine。我根据这个插件二次封装出了spine-viewer这个组件，这样我们就无需额外学习Pixi.JS，直接可以利用该组件傻瓜式地展示Spine动画了。

安装

npm i pixi.js@7.4.3 pixi-spine @alphardex/spine-viewer

引入

import "@alphardex/spine-viewer";

使用

<spine-viewer
  src="/kanade/sd_main.skel"
  animation-name="w_pure_idle01_f"
></spine-viewer>

此外，我专门写了个Demo 网站，欢迎来体验更多功能：

有趣的动画

请选择你的英雄

<live2d-viewer>：呈现 Live2D 虚拟角色

Live2D 技术将 2D 图像转化为生动动态角色，广泛应用于虚拟主播和游戏角色展示，为我们带来了突破次元壁的体验。

网页上能渲染它的最常用框架依旧是Pixi.JS，对应的插件是pixi-live2d-display。同样地，我也对应地封装好了它的组件live2d-viewer，可以很方便地进行Live2D动画的展示。

安装

npm i pixi.js@7.4.3 pixi-live2d-display@0.5.0-beta @alphardex/live2d-viewer

引入

import "@alphardex/live2d-viewer";

此外Live2D额外需要一个Cubism的运行时文件，这个运行时有 2 个版本：2.1 版和 4 版。如果不清楚Live2D资源是哪个版本的，可以两个都引入。

2.1 版只需引入cdn文件：

<!-- Cubism 2.1 -->
<script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>

4 版由于最近更新了 API，直接引用cdn文件会报错。我们需要进入它的官网，点击Cubism SDK for Web左边的按钮下载最新版来下载它，再引用正确的 JS 文件即可（一般位于/CubismSdkForWeb-5-r.4/Core/live2dcubismcore.min.js）

引入运行时后，我们就可以使用这个组件了。

<live2d-viewer
  src="/kanade-live2d/17kanade_cloth001_3.0_f_t02.model3.json"
  motion="w-kanade-glad01"
  auto-interact="false"
  y="2.5"
></live2d-viewer>

<model-viewer>：嵌入 3D 模型

Google 开发的 Model Viewer 组件基于three.js，可轻松在网页中嵌入并交互 3D 模型。

安装

npm i three @google/model-viewer

引入

import "@google/model-viewer";

使用

<model-viewer src="/Bonsai.glb" camera-controls></model-viewer>

<a-frame>：构建 WebVR/AR 场景

A-Frame 框架，也是基于three.js开发的，它通过声明式的 HTML 语法，让 VR/AR 场景的创建变得直观易懂，降低了 3D Web 开发的技术门槛。

安装

npm i aframe

引入

import AFRAME from "aframe";

使用

<a-scene embedded>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder
    position="1 0.75 -3"
    radius="0.5"
    height="1.5"
    color="#FFC65D"
  ></a-cylinder>
  <a-plane
    position="0 0 -4"
    rotation="-90 0 0"
    width="4"
    height="4"
    color="#7BC8A4"
  ></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

<css-doodle>：生成程序化 CSS 艺术

CSS Doodle 通过程序化的方式生成 CSS 艺术图案，结合随机函数和网格系统，创造出无限可能的视觉效果。

该组件由yuanchuan写成，他在 CodePen 上写过很多创意满满的 Demo。

安装

npm i css-doodle

引入

import "css-doodle";

使用

<css-doodle onclick="(function update(e){e.target.update();})(arguments[0])">
  :doodle {
    @grid: 8 / 16rem;
    @shape: circle;
  }
  margin: 0.3rem;
  background: hsla(@r(0,360), @r(50,75)%, @r(50,75)%, @r(0.8));
  border-radius: @p(0 100%, 100% 0);
  transform: scale(@r(0.75, 1.25));
  transition: 0.3s;
</css-doodle>

<shader-toy>：展示 GPU 着色器特效

Shader Toy 组件将 GPU 着色器编程带到 Web 中，通过 Shader 代码创造复杂的数学艺术图案，展现了计算图形学的魅力。

好奇什么是 Shader？可以看看我之前写过的一本教程。

我还写过这样一篇文章，教你如何利用该组件将网上一些炫酷的 Shader 特效移植到桌面背景上。

安装

npm i kokomi.js

引入

import * as kokomi from "kokomi.js";

kokomi.ShaderToyElement.register();

使用

<shader-toy>
  <script type="frag">
    vec2 cart2polar(vec2 uv){
        float phi=atan(uv.y,uv.x);
        float r=length(uv);
        return vec2(phi,r);
    }

    void mainImage(out vec4 fragColor,in vec2 fragCoord){
        vec2 uv=fragCoord/iResolution.xy;
        uv=(uv-.5)*2.;
        uv.x*=iResolution.x/iResolution.y;

        uv=cart2polar(uv);

        float c=sin(uv.y*20.+uv.x);
        fragColor=vec4(vec3(c),1.);
    }
  </script>
</shader-toy>

<pixel-canvas>：Canvas 实现的像素艺术体验

前端利用canvas，能创作出很多特效，如果将这些特效直接封装成 Web 组件使用，那也是很棒的主意。

这个<pixel-canvas>组件就是一个很好的例子。鼠标悬浮上去就能出现微粒浮现闪烁的效果，非常酷。

该组件由hexagoncircle写成，他还写了一些同样很有意思的特效组件（如<pointer-particles>、<click-spark>），感兴趣的可以看看。

引入：将这个JS 代码拉到本地，直接通过<script>标签引入即可。

<script src="/pixel-canvas.js"></script>

使用

<pixel-canvas></pixel-canvas>

<div>——容器，亦有无尽的可能？

前端的一切布局，背后都离不开<div>这个容器，而<div>容器本身，也可以有很大的探索空间。

通过 2 个伪元素::before和::after，我们可以将单个<div>分裂成 3 个元素，而针对每个元素，我们可以运用大量的 CSS Background 技巧配合 box-shadow 等其他属性来进行图案的绘制，换言之，就是 CSS Art 的创作。

CodePen 上有很多 CSS 艺术家，比如Lynn Fisher，她用仅仅单个<div>，就能创作出一些复杂的画作，例如上面的收音机，就是她的单<div>创作作品之一。她将自己所有的 CSS 艺术品都放在了a.singlediv这个网站上，看完简直令人叹为观止。

<div class="div-draw" id="radio"></div>
<style>
  .div-draw {
    position: absolute;
    left: 50%;
    top: 50%;
  }

  .div-draw:before,
  .div-draw:after {
    display: block;
    content: "";
    position: absolute;
  }

  #radio {
    /* Draw using background */
  }

  #radio:before {
    /* Draw using background */
  }

  #radio:after {
    /* Draw using background */
  }
</style>

最后

这么一看下来，有没有大开眼界呢？

从最基本的 HTML 标签，到各种各样的 Web 组件，最后再回归到最基本的 div 标签。不论是 2D、3D，还是内容展示、创意编程，整个 Web 宛如一片浩瀚的海洋等待着我们去探索。