前言
偶然的一次机会，在浏览网页的时候看到一个炫酷的效果：一个个小点要飞出屏幕，极其逼真。于是，便有了这次的效果呈现：炫酷的闪烁点。话不多说，大家直接看下面的动态效果预览。
效果预览
和以往的纯 CSS 不同。这次的效果主要是由 JS 控制实现而成，接下来我们就进入整个效果的实现部分。
JS 部分
首先我们看到 JS 部分，这里的 JS 有生成闪烁点的作用。相关代码如下。
<script>
const COUNT = 20;
let random = (min, max) => Math.random() * (max - min) + min;
let container = document.querySelector(".container");
Array(COUNT)
.fill("")
.forEach((x, i) => {
let span = document.createElement("span");
span.style.setProperty("--x", random(1, 99));
span.style.setProperty("--y", random(1, 99));
span.style.setProperty("--n", i);
span.style.setProperty(
"--dark-color",
`hsl(${70 + i * 0.1}, 100%, 50%)`
);
span.style.setProperty(
"--bright-color",
`hsl(${85 + i * 0.1}, 100%, 60%)`
);
container.appendChild(span);
});
</script>
这里动态创建了 20 个 span 元素，并为每个 span 元素设置了一些自定义的 CSS 变量。这些 CSS 变量包括 x、y、n、dark-color 和 bright-color，分别表示 span 元素的位置、序号和颜色。这些变量的值是通过调用 random 函数生成的随机数来设置的。最后，这些 span 元素被添加到了一个 class 为 container 的 HTML 元素中。这段代码的作用是创建一个具有动态效果的布局，每个 span 元素的位置和颜色都是随机的。
这里具体说一下如何创建 20 个空字符串的数组。我们使用 fill 方法创建一个包含 20 个空字符串的数组，并通过 forEach 方法对数组中每个元素进行操作。在 forEach 方法中，创建一个 span 元素，并为其设置一些 CSS 属性，包括 x 和 y 坐标的随机值，以及颜色值的计算公式。最后将 span 元素添加到 container 中。
通过这段代码，可以动态生成 20 个带有随机位置和颜色的 span 元素，并将它们显示在页面上。
CSS 部分
然后是 CSS 部分。这里的 CSS 就是为整个效果画龙点睛的。
.container {
width: 100%;
height: 100%;
position: relative;
perspective: 500px;
}
.container span {
position: absolute;
width: 30px;
height: 30px;
margin-left: -15px;
margin-top: -15px;
background: radial-gradient(var(--bright-color), var(--dark-color));
border-radius: 50%;
box-shadow: 0 0 25px 3px var(--dark-color);
transform: translateX(50vw) translateY(50vh) translateZ(-1000px);
animation: animate 1.5s infinite alternate;
animation-delay: calc(var(--n) * 0.015s);
}
通过在一个容器中放置多个圆形元素 span，并对这些元素应用动画效果。每个圆形元素都有一个独特的动画延迟时间，使得它们在不同的时间点开始动画，从而产生一种连续流动的效果。具体来说，每个圆形元素都被定位在容器中心，然后通过 transform 属性将其移动到视口的中心，再通过 translateZ 属性将其移动到一个远离视口的位置，产生立体效果。接着应用了一个动画效果，使得圆形元素在 1.5 秒内按照指定的路径移动，并在移动结束时逐渐消失。
接下来定义一个动画效果。
@keyframes animate {
80% {
filter: opacity(1);
}
100% {
transform: translateX(calc(var(--x) * 1vw))
translateY(calc(var(--y) * 1vh));
filter: opacity(0);
}
}
动画效果通过 @keyframes 规则定义，其中包括两个关键帧：80% 和 100%。在 80% 关键帧中，圆形元素的透明度被设置为 1，即完全不透明；而在 100% 关键帧中，圆形元素的位置被根据变量 (--x) 和 (--y) 的值进行调整，同时透明度被设置为 0，即完全透明。
总的来说，这里的 CSS 实现了一个动态的背景效果，通过控制圆形元素的位置和透明度，产生一种流动和消失的效果，增加页面的视觉吸引力。
总结
以上就是整个效果的实现过程了，代码简单易懂。通过 JS 来实现该效果，又不失逻辑性。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
