这里是 alphardex。
在现代 Web 开发中，我们常常利用特定的 HTML 标签来呈现不同形式的视觉内容：<img>用于图片，<video>用于视频。但除此之外，你知道 Web 上还能展示哪些视觉元素吗？本文将带你探索 Web 世界中的多样化视觉组件，从内容展示到炫酷特效，一览现代 Web 的视觉表现力。
在线体验
推荐访问以下网站，实时体验文中所提到的各类视觉组件：
注意：每个组件的顶部标题均可点击，进入相应的 Demo 页可以查看更多细节和互动示例。
传统 HTML 标签
首先，让我们回顾下我们的老朋友们：<img>、<video>和<svg>。它们作为 Web 标准的基础标签，广泛被应用于各类项目中。
<img>
用于嵌入静态图片，需通过src属性来指定图像的资源路径。
html
<img src="/kanade.jpg" alt="Yoisaki Kanade" /><video>
支持播放视频文件，跟图片一样，它也需通过src来指定视频的资源路径。
诸如autoplay、muted、loop等属性可以控制它的特征（自动播放、静音、循环播放等）。
html
<video
src="/3rd_anv_title_03.mp4"
alt="3rd Anniversary Title"
autoplay
muted
loop
></video><svg>
用于绘制矢量图形，在任何分辨率下都能保持清晰。
它最核心的部分是路径<path>元素，可以构造任意复杂形状。
html
<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 组件的封装版，用起来更加方便。
安装
sh
npm i @lottiefiles/lottie-player引入
js
import "@lottiefiles/lottie-player";使用
html
<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动画了。
安装
sh
npm i pixi.js@7.4.3 pixi-spine @alphardex/spine-viewer引入
js
import "@alphardex/spine-viewer";使用
html
<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动画的展示。
安装
sh
npm i pixi.js@7.4.3 pixi-live2d-display@0.5.0-beta @alphardex/live2d-viewer引入
js
import "@alphardex/live2d-viewer";此外Live2D额外需要一个Cubism的运行时文件，这个运行时有 2 个版本：2.1 版和 4 版。如果不清楚Live2D资源是哪个版本的，可以两个都引入。
2.1 版只需引入cdn文件：
html
<!-- 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）
引入运行时后，我们就可以使用这个组件了。
html
<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 模型。
安装
sh
npm i three @google/model-viewer引入
js
import "@google/model-viewer";使用
html
<model-viewer src="/Bonsai.glb" camera-controls></model-viewer><a-frame>：构建 WebVR/AR 场景
A-Frame 框架，也是基于three.js开发的，它通过声明式的 HTML 语法，让 VR/AR 场景的创建变得直观易懂，降低了 3D Web 开发的技术门槛。
安装
sh
npm i aframe引入
js
import AFRAME from "aframe";使用
html
<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。
安装
sh
npm i css-doodle引入
js
import "css-doodle";使用
html
<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 特效移植到桌面背景上。
安装
sh
npm i kokomi.js引入
js
import * as kokomi from "kokomi.js";
kokomi.ShaderToyElement.register();使用
html
<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>标签引入即可。
html
<script src="/pixel-canvas.js"></script>使用
html
<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这个网站上，看完简直令人叹为观止。
html
<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 宛如一片浩瀚的海洋等待着我们去探索。