整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
年前，粒子動畫席卷了網絡，并成功地為自己開辟了一個利基市場。當前對具有高科技氛圍和幾何裝飾的設計的巨大癡迷使它們成為當今更受歡迎的解決方案之一。
使用粒子動畫給人留下深刻印象
隨著時間的推移，技術成熟了。從散落在畫布上的雜亂無章的小白點，它變成了一種潛力巨大的工具。這不是什么特別的東西，但它有一定的令人驚嘆的因素。此外，它完美地為高科技、幾何和商務美學做出了貢獻——自然而然地完成了它們。
前提是：粒子動畫要給人留下深刻印象。而且，開發人員始終堅持這一假設，充分利用它。讓我們考慮一下這個解決方案的真正粉絲創建的一些驚人的代碼片段。
NO.1 Justin Windle 的 30,000 個粒子
這里的標題不言自明。船上有 30,000 個粒子，您會期待一些宏偉的東西。賈斯汀溫德爾當然達到了我們的期望。他的概念令人難以置信。用你的鼠標到處玩。物理學只是例外。這個版本的粒子動畫在開發者中很受歡迎，盡管規模沒有那么大。
NO.2 Alex Safayan 在水中的魚
Alex Safayan 提出了幾乎相同的解決方案，但在這種情況下，粒子越來越大。鼠標光標也將這些點推開，形成帶有微妙漣漪效果的痕跡。動畫的行為讓人想起魚靠近水面時的運動。注意物理學：點之間的相互作用是經過深思熟慮的。
獲得 2017 年度最受關注項目獎的 Plankton 無疑是值得關注的。該項目不僅著迷于想法，還著迷于實現。從像手套一樣適合這里的微妙色彩到看起來令人難以置信的自然的華麗行為，Marco Dell'Anna 對細節有著敏銳的洞察力。
我喜歡這里華麗的復古氛圍、霓虹燈和華麗的色彩。很難把你的眼睛從它身上移開。Stardust 是設計和編碼的共生體，是一部鼓舞人心的杰作。
Akimitsu Hamamuro 邀請您在他的游樂場添加所謂的“重力點”。它們侵入點的混亂運動，像磁鐵一樣拉動它們。雖然它們不扮演軌道中心的角色；然而，它們形成了迫使粒子向其方向移動的焦點。
如今，球體是英雄區域非常流行的風格選擇。Nate Willey 對這一趨勢的看法令人印象深刻。由于微小的顆粒，球體看起來很脆弱，同時由于經過深思熟慮的行為而堅固。他分解和重新形成球體的程序非常棒。
Kevin Rajarm 汲取了粒子動畫的美麗和優雅，并用Three.js的強大來增強它，帶來了一個精致但真正復雜的概念。令人驚嘆的海浪景色讓人感覺未來主義、人工和迷人。
還有更令人印象深刻的使用粒子動畫的方法。讓我們走出常規，開箱即用地思考：這種方法很容易使標識和字母等元素受益。
Interactive Particle Logo 就是一個典型的例子。它看起來像是上面提到的 Justin Windle 片段的重新設想的解決方案。雖然沒有 30,000 個點，但它由數量驚人的粒子組成，巧妙地組成了“CODEPEN”這個詞。這是該概念找到實際用途的案例之一。
Louis Hoebregts 在這支筆中提供了先前解決方案的彩色版本。這里的文本是由一千個彩色實心圓圈組成的，這些圓圈通過與上一個示例相同的交互性來豐富。
雖然這不是一個戲劇性的入口，但它有一些令人著迷的東西。流暢的動畫慢慢揭開人物的面紗，點燃我們的興趣。這個概念有某種神秘的風格，類似于“陌生人”的介紹。
這是Marco Dell'Anna的又一杰作。這一次，粒子動畫參與塑造了著名的耐克標志。從晦澀、半透明到明快、立體，動畫逐漸暴露了標志，不顯眼地抓住了整體的注意力。
粒子動畫是越小越好的情況之一。點越小，可以實現的效果就越令人印象深刻。一方面，由于涉及幾何和物理，它看起來很復雜。另一方面，由于精致的形狀，它看起來脆弱而微妙。這種獨特的融合使粒子動畫與眾不同且引人注目。
粒子動畫在企業網站建設中的運用案例
圖片來源：素馬設計
隨著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 實現熱點地圖動畫
下面給大家初步講講，如何用 CSS3 制作一個熱點地圖，你可以學到 HTML 的布局、HTML 列表、CSS 選擇器、CSS3 動畫、CSS3 的 2D 轉換等，對于練習 HTML、CSS 也有很好的幫助。
相關代碼下載命令：
點擊文末閱讀原文，獲取完整代碼。
首先我們來創建如下目錄結構：
在 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 實現熱點地圖動畫》課程，目前正在限時免費中，感興趣的小伙伴趕緊點擊了解更多，進行學習吧！
說不定做出來的地圖比小編的更好看~
點擊了解更多，學習完整課程內容～
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
