当前位置：首页 > news >正文

【css酷炫效果】纯CSS实现全屏粒子连线

news 来源：原创 2025/5/2 15:59:32

【css酷炫效果】纯CSS实现全屏粒子连线

缘
创作背景
html结构
css样式
完整代码
效果图

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492027

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

  <div class="particle-universe">
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
  </div>

css样式

:root {
  --particle-size: 30px;
  --glow-color: #4affde;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle, #001122 0%, #000 100%);
}

.particle-universe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--particle-size), 1fr));
  gap: 2px;
  width: 100vw;
  height: 100vh;
  padding: 10px;
  filter: contrast(120%);
}

.particle {
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transition: 
    transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    background 0.4s,
    box-shadow 0.3s;
  aspect-ratio: 1;
  position: relative;
  cursor: pointer;
}

/* 粒子激活态 */
.particle:hover {
  background: var(--glow-color);
  box-shadow: 0 0 20px var(--glow-color);
  transform: scale(1.8);
}

/* 连接线生成 */
.particle:hover::before,
.particle:hover ~ .particle::after {
  content: '';
  position: absolute;
  background: linear-gradient(
    to right,
    transparent 20%,
    var(--glow-color) 50%,
    transparent 80%
  );
  animation: energy-flow 1.5s linear infinite;
}

/* 当前粒子光环 */
.particle:hover::before {
  inset: -5px;
  filter: blur(5px);
}

/* 相邻粒子连接线 */
.particle:hover ~ .particle::after {
  inset: -0.1px -11px;
  background-size: 200% 100%;
  mask: linear-gradient(90deg, #000 40%, transparent 60%);
}

@keyframes energy-flow {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}


.particle:nth-child(odd) { animation: float 4s ease-in-out infinite; }
.particle:nth-child(even) { animation: float 5s ease-in-out infinite reverse; }

/* 随机移动动画 */
@keyframes float {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(2px,-3px); }
  50% { transform: translate(-1px,4px); }
  75% { transform: translate(3px,1px); }
}

完整代码

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --particle-size: 30px;
  --glow-color: #4affde;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle, #001122 0%, #000 100%);
}

.particle-universe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--particle-size), 1fr));
  gap: 2px;
  width: 100vw;
  height: 100vh;
  padding: 10px;
  filter: contrast(120%);
}

.particle {
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transition: 
    transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    background 0.4s,
    box-shadow 0.3s;
  aspect-ratio: 1;
  position: relative;
  cursor: pointer;
}

/* 粒子激活态 */
.particle:hover {
  background: var(--glow-color);
  box-shadow: 0 0 20px var(--glow-color);
  transform: scale(1.8);
}

/* 连接线生成 */
.particle:hover::before,
.particle:hover ~ .particle::after {
  content: '';
  position: absolute;
  background: linear-gradient(
    to right,
    transparent 20%,
    var(--glow-color) 50%,
    transparent 80%
  );
  animation: energy-flow 1.5s linear infinite;
}

/* 当前粒子光环 */
.particle:hover::before {
  inset: -5px;
  filter: blur(5px);
}

/* 相邻粒子连接线 */
.particle:hover ~ .particle::after {
  inset: -0.1px -11px;
  background-size: 200% 100%;
  mask: linear-gradient(90deg, #000 40%, transparent 60%);
}

@keyframes energy-flow {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}


.particle:nth-child(odd) { animation: float 4s ease-in-out infinite; }
.particle:nth-child(even) { animation: float 5s ease-in-out infinite reverse; }

/* 随机移动动画 */
@keyframes float {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(2px,-3px); }
  50% { transform: translate(-1px,4px); }
  75% { transform: translate(3px,1px); }
}
</style>
</head>
<body>
  <div class="particle-universe">
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
  </div>
</body>
</html>