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 元素。