粒子特效是一種常見的網頁特效，通過在CSS中設置粒子的樣式和數量，可以創建出各種形狀和顏色的粒子效果。以下是一個簡單的粒子特效 CSS 碼碼源。
1. 創建粒子
首先，我們需要創建一個 HTML 文件，其中包含一個包含粒子效果的 CSS 樣式表。我們可以使用 CSS 的偽元素來創建粒子效果，如下所示：
<div class="bubble"></div>
在這個例子中，我們使用了一個 div 元素，并在其中添加了一個偽元素，該偽元素被稱為 bubble 元素，用于創建粒子效果。
2. 設置 bubble 元素的樣式
在 bubble 元素中，我們可以設置不同的樣式來影響粒子的外觀和行為。以下是一些可能的樣式設置：
.bubble {
position: relative;
width: 20px;
height: 20px;
background-color: red;
animation: bubble 1s infinite;
.bubble:before,
.bubble:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: blue;
animation: bubble-before 1s infinite;
.bubble:before {
animation-name: bubble-before;
animation-duration: 0.5s;
animation-iteration-count: infinite;
.bubble:after {
animation-name: bubble-after;
animation-duration: 0.5s;
animation-iteration-count: infinite;
@keyframes bubble {
0% {
transform: translate(0, 0);
50% {
transform: translate(0, 20px);
100% {
transform: translate(0, 0);
在這個例子中，我們使用了一個紅色的背景色，并在 bubble 元素中添加了兩個藍色的偽元素，這些偽元素在動畫中產生了不同的移動效果。
3. 添加動畫效果
我們還可以在 bubble 元素中添加其他動畫效果，以進一步增加粒子的趣味性。以下是一個簡單的粒子特效 CSS 代碼，可以添加一個減速效果：
.bubble {
position: relative;
width: 20px;
height: 20px;
background-color: red;
animation: bubble 1s infinite;
.bubble:before,
.bubble:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: blue;
animation: bubble-before 1s infinite;
.bubble:before {
animation-name: bubble-before;
animation-duration: 0.5s;
animation-iteration-count: infinite;
.bubble:after {
animation-name: bubble-after;
animation-duration: 0.5s;
animation-iteration-count: infinite;
@keyframes bubble-before {
0% {
transform: translate(0, 0);
50% {
transform: translate(0, 20px);
80% {
transform: translate(0, -20px);
100% {
transform: translate(0, 0);
這個代碼添加了一個減速效果，使得粒子在動畫開始時移動速度更快，隨著動畫的播放，粒子的移動速度會逐漸減慢。
以上就是一個簡單的粒子特效 CSS 碼碼源的創建和設置。通過使用不同的樣式和動畫效果，我們可以創建出各種形狀和顏色的粒子效果，從而豐富網頁的 UI 元素。