年前，粒子动画席卷了网络，并成功地为自己开辟了一个利基市场。当前对具有高科技氛围和几何装饰的设计的巨大痴迷使它们成为当今更受欢迎的解决方案之一。

使用粒子动画给人留下深刻印象
随着时间的推移，技术成熟了。从散落在画布上的杂乱无章的小白点，它变成了一种潜力巨大的工具。这不是什么特别的东西，但它有一定的令人惊叹的因素。此外，它完美地为高科技、几何和商务美学做出了贡献——自然而然地完成了它们。

前提是：粒子动画要给人留下深刻印象。而且，开发人员始终坚持这一假设，充分利用它。让我们考虑一下这个解决方案的真正粉丝创建的一些惊人的代码片段。

NO.1 Justin Windle 的 30,000 个粒子

这里的标题不言自明。船上有 30,000 个粒子，您会期待一些宏伟的东西。贾斯汀温德尔当然达到了我们的期望。他的概念令人难以置信。用你的鼠标到处玩。物理学只是例外。这个版本的粒子动画在开发者中很受欢迎，尽管规模没有那么大。

NO.2 Alex Safayan 在水中的鱼

Alex Safayan 提出了几乎相同的解决方案，但在这种情况下，粒子越来越大。鼠标光标也将这些点推开，形成带有微妙涟漪效果的痕迹。动画的行为让人想起鱼靠近水面时的运动。注意物理学：点之间的相互作用是经过深思熟虑的。

NO.2 浮游生物——Marco Dell'Anna 的粒子生命

获得 2017 年度最受关注项目奖的 Plankton 无疑是值得关注的。该项目不仅着迷于想法，还着迷于实现。从像手套一样适合这里的微妙色彩到看起来令人难以置信的自然的华丽行为，Marco Dell'Anna 对细节有着敏锐的洞察力。

NO.4 Marco Dell'Anna的星尘

我喜欢这里华丽的复古氛围、霓虹灯和华丽的色彩。很难把你的眼睛从它身上移开。Stardust 是设计和编码的共生体，是一部鼓舞人心的杰作。

NO.5 Akimitsu Hamamuro 的重力点

Akimitsu Hamamuro 邀请您在他的游乐场添加所谓的“重力点”。它们侵入点的混乱运动，像磁铁一样拉动它们。虽然它们不扮演轨道中心的角色；然而，它们形成了迫使粒子向其方向移动的焦点。

NO.6 Nate Wiley 的 Particle Orb CSS

如今，球体是英雄区域非常流行的风格选择。Nate Willey 对这一趋势的看法令人印象深刻。由于微小的颗粒，球体看起来很脆弱，同时由于经过深思熟虑的行为而坚固。他分解和重新形成球体的程序非常棒。

NO.7 Kevin Rajaram 的粒子波

Kevin Rajarm 汲取了粒子动画的美丽和优雅，并用Three.js的强大来增强它，带来了一个精致但真正复杂的概念。令人惊叹的海浪景色让人感觉未来主义、人工和迷人。

非正统用途

还有更令人印象深刻的使用粒子动画的方法。让我们走出常规，开箱即用地思考：这种方法很容易使标识和字母等元素受益。

NO.8 Tamino Martinius 的交互式粒子标志

Interactive Particle Logo 就是一个典型的例子。它看起来像是上面提到的 Justin Windle 片段的重新设想的解决方案。虽然没有 30,000 个点，但它由数量惊人的粒子组成，巧妙地组成了“CODEPEN”这个词。这是该概念找到实际用途的案例之一。

NO.9 Louis Hoebregts 的文本到粒子

Louis Hoebregts 在这支笔中提供了先前解决方案的彩色版本。这里的文本是由一千个彩色实心圆圈组成的，这些圆圈通过与上一个示例相同的交互性来丰富。

NO.10 粒子由 Marco Dell'Anna 书写文本

虽然这不是一个戏剧性的入口，但它有一些令人着迷的东西。流畅的动画慢慢揭开人物的面纱，点燃我们的兴趣。这个概念有某种神秘的风格，类似于“陌生人”的介绍。

NO.11 马可·戴尔安娜 (Marco Dell'Anna) 就这样做

这是Marco Dell'Anna的又一杰作。这一次，粒子动画参与塑造了著名的耐克标志。从晦涩、半透明到明快、立体，动画逐渐暴露了标志，不显眼地抓住了整体的注意力。

引人注目的效果

粒子动画是越小越好的情况之一。点越小，可以实现的效果就越令人印象深刻。一方面，由于涉及几何和物理，它看起来很复杂。另一方面，由于精致的形状，它看起来脆弱而微妙。这种独特的融合使粒子动画与众不同且引人注目。

粒子动画在企业网站建设中的运用案例

图片来源：素马设计

秘CSS3：打造视觉盛宴——深度解析渐变、阴影与遮罩技术

随着Web技术的不断演进，CSS3以其强大的视觉表现力，赋予网页设计无限可能。本文将深入剖析CSS3中的三大视觉魔法工具——渐变、阴影与遮罩技术，通过详尽的理论讲解和丰富的实例演示，助您掌握这些技巧，打造出令人眼前一亮的网页视觉盛宴。

一、魅力渐变：色彩的艺术流动

1. 线性渐变：平滑过渡，简约而不简单

css
background: linear-gradient(to right, #ff6b6b, #ff9595);

上述代码创建了一个从左至右，由#ff6b6b渐变到#ff9595的线性渐变背景。您可以调整方向（如`to bottom`、`45deg`等）、添加更多颜色停止点来丰富渐变效果。

2. 径向渐变：聚焦视觉中心，营造立体感

css
background: radial-gradient(circle at center, #f7f7f7, #dcdcdc);

此例中，我们创建了一个以元素中心为圆心，从#f7f7f7渐变到#dcdcdc的圆形径向渐变背景。通过调整形状（如`ellipse`）、大小（如`closest-side`）和位置（如`top left`），可以灵活定制径向渐变样式。

二、立体阴影：赋予元素生命与空间感

1. 盒子阴影（Box Shadow）：轻松实现三维效果

css
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);

上述代码为元素添加了一个向右下偏移2px、模糊半径为8px、颜色为rgba(0, 0, 0, 0.3)的阴影。理解盒阴影的基本参数（水平偏移、垂直偏移、模糊半径、扩散半径、颜色）并灵活运用，即可创造出丰富的阴影效果。

2. 文本阴影（Text Shadow）：让文字跃然纸上

css
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.½), -1px -1px 2px rgba(255, 255, 255, 0.5);

此处为文本设置了两个阴影：一个向右下偏移、颜色较深的阴影，以及一个向左上偏移、颜色较浅的阴影，形成微妙的浮雕效果。通过叠加多个阴影、调整参数，您可以创作出各种独特的文本样式。

三、神奇遮罩：掌控元素可见度与透明度

1. CSS Mask：精细裁剪，展现独特视界

css
mask-image: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);

该代码为元素应用了一个从左至右的线性渐变遮罩，使得元素左侧和右侧各有一半区域透明。您还可以使用`mask-mode`、`mask-repeat`、`mask-position`等属性进一步调整遮罩行为。

2. CSS Clip Path：创意裁剪，打破常规布局

css
clip-path: polygon(0 0, 100% 0, .png);

上述代码使用多边形裁剪路径，将元素顶部裁剪成尖角形状。您还可以使用椭圆、圆形、内切/外切矩形等多种路径类型，甚至借助SVG路径实现更为复杂的裁剪效果。

四、实战案例：融合三大技术，打造视觉盛宴

案例一：动态渐变按钮

css
/* 定义CSS变量 */
:root {
  --start-color: #ff6b6b;
  --end-color: #ff9595;
}

.button {
  background: linear-gradient(to right, var(--start-color), var(--end-color));
  transition: background 0.3s ease-in-out;
}

.button:hover,
.button:focus {
  --start-color: #ff9595;
  --end-color: #ff6b6b;
}

利用CSS变量、伪类和动画，创建一个点击时背景渐变颜色动态变化的按钮：

案例二：悬浮卡片与阴影交互

css
.card {
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.card:hover {
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5);
}

结合盒子阴影与:hover伪类，实现鼠标悬停时卡片阴影增强的交互效果：

案例三：遮罩叠加文字特效

css
.image-overlay {
  background-image: url('image.jpg'), linear-gradient(to bottom, transparent, black);
  background-blend-mode: multiply;
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

利用遮罩与多重背景，创造出文字在图片上淡入淡出的特效：

结语

CSS3的渐变、阴影与遮罩技术，如同网页设计的调色板、光影魔术师和剪刀手，赋予网页视觉表现无尽的可能性。通过深入理解并熟练运用这些技术，您将能打造出既美观又富有创意的网页界面，为用户带来极致的视觉体验。持续探索、实践与创新，您的每一个作品都将成为Web世界中的一道独特风景。

面上大多数的热点地图，都是以 JavaScript 来做的，但是使用 CSS3 制作的热点地图倒还真的挺少见的。

其实 CSS3 的功能也很强大，能帮助我们实现很多用 JavaScript 实现的效果，最近小编刚学会 HTML5 和 简单的 CSS3，在这里用 CSS3 实现了热点地图动画，效果如下：

下面给大家初步讲讲，如何用 CSS3 制作一个热点地图，你可以学到 HTML 的布局、HTML 列表、CSS 选择器、CSS3 动画、CSS3 的 2D 转换等，对于练习 HTML、CSS 也有很好的帮助。

知识点

• HTML 列表
• CSS 相对定位与绝对定位
• CSS3 动画
• CSS3 transform 属性
• CSS3 animation-delay () 属性

相关代码下载命令：

点击文末阅读原文，获取完整代码。

HTML 基础结构

首先我们来创建如下目录结构：

在 img 目录下获取地图图片，打开终端，执行以下命令：

$ cd img$ wget https://labfile.oss.aliyuncs.com/courses/2673/map_black_bg.png

在 index.html 文件中写入如下代码：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>热点地图</title>    <!-- 引入CSS -->    <link rel="stylesheet" href="./index.css" />  </head>  <body>    <!-- 地图 -->    <div class="china-map"></div>  </body></html>

为了让我们的城市能够显示在地图上，在这里我选择使用 CSS 相对定位与绝对定位的方式。

在 index.css 文件中写入如下代码：

/* CSS 通配符 * 号，表示所有的元素一开始默认的内外边距为 0 */* {  margin: 0;  padding: 0;}body {  /* 背景色 */  background: #31363a;}.china-map {  /* 给地图加上相对定位 */  position: relative;  /* 给地图设置宽高 */  width: 747px;  height: 617px;  /* 设置背景图片，指定为不重复，并且居中 */  background: url("./map_black_bg.png") no-repeat center;  /* 将地图设置为离顶部60px，左右居中 */  margin: 60px auto 0;}

执行如下步骤预览效果：

这下我们的地图就显示出来了。

地点样式设置

地图成功显示后，我们需要在上面设置地点以及地点的样式。

在 index.html 中加入以下代码：

<div class="china-map">  <!-- 地点区域 -->  <div class="region">    <!-- 地点显示的小圆点 -->    <div class="dot"></div>    <!-- 向外扩散的圆圈 -->    <div class="place"></div>    <!-- 地名 -->    <div class="txt">青海</div>  </div></div>

在 index.css 中加入以下代码：

* {  margin: 0;  padding: 0;}body {  background: #31363a;}/* 地图 */.china-map {  position: relative;  width: 747px;  height: 617px;  background: url("./map_black_bg.png") no-repeat center;  margin: 60px auto 0;}/* 区域地点 */.region {  /* 绝对定位 */  position: absolute;}/* 小圆点 */.region .dot {  position: absolute;  top: 50%;  left: 50%;  margin: -5px 0 0 -5px;  width: 10px;  height: 10px;  background: #a2a9b4;  opacity: 1;  border-radius: 50%;}/* 向外扩散的圆圈 */.region .place {  position: absolute;  top: 50%;  left: 50%;  margin: -33px 0 0 -33px;  width: 66px;  height: 66px;  border: 2px solid #b7b7b7;  border-radius: 50%;  /* 透明度 */  opacity: 0.12;  /* 阴影 */  box-shadow: 0 0 4px #82878f inset;}/* 地名 */.region .txt {  position: absolute;  top: -20px;  left: 10px;  font-size: 14px;  color: #ccc;  width: 50px;}

预览效果：

如何将这个地点放置在相应位置上呢？这个时候就要使用 left 属性和 top 属性了，通过计算正确的偏移值，将地点放置在合适的位置上。

修改 .region 的样式：

.region {  position: absolute;  top: 302px;  left: 308px;}

预览效果：

青海就已经显示在正确的地方上了。但是我们转念一想，如果我们还有一个城市，比如北京，这个时候是不是该这样：

.region2 {  position: absolute;  top: 229px;  left: 559px;}

不过如此一来，每当创建一个城市，就要新写一个 CSS 类，并且每一个类中都会有同样的代码 position:absolute，如果大篇幅的重复会增加代码的冗余度。所以这个时候，我们可以专门新建一个类来放置每一个城市的偏移值，修改 index.css 文件，增加如下代码：

.region {  position: absolute;}/* 青海 */.region-qh {  top: 302px;  left: 308px;}/* 北京 */.region-bj {  top: 229px;  left: 559px;}

修改 index.html：

<div class="china-map">  <!-- 青海 -->  <div class="region region-qh">    <div class="dot"></div>    <div class="place"></div>    <div class="txt">青海</div>  </div>  <!-- 北京 -->  <div class="region region-bj">    <div class="dot"></div>    <div class="place"></div>    <div class="txt">北京</div>  </div></div>

预览效果：

同样的道理，如果我们想设置不同地点有不同颜色的显示，我们可以专门新建一个颜色类：

修改 index.html：

<!-- 北京 --><div class="region region-bj blue">  <div class="dot"></div>  <div class="place"></div>  <div class="txt">北京</div></div>

在 index.css 中加入以下代码：

/* 颜色*/.region.blue .place {  width: 120px;  height: 120px;  margin: -64px 0 0 -64px;  border: 1px solid #009fd9;  box-shadow: 0 0 12px #009fd9 inset;}.region.blue .dot {  background: #0080d9;}

预览效果：

如此一来，如果我们想给一些地点加上样式，只需要为它加上像 .blue 这样的颜色类就好了。现在我们将其他的地点以及样式增加上去。

小编学习的这个《CSS3 实现热点地图动画》课程，目前正在限时免费中，感兴趣的小伙伴赶紧点击了解更多，进行学习吧！

说不定做出来的地图比小编的更好看~

点击了解更多，学习完整课程内容～