设计公司网站图公司网站域名cn和com
【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>
效果图
