HTML+CSS+JS实现 ❤️六边形圆柱弹性动画特效❤️

效果演示：

代码目录：

主要代码实现：

部分CSS样式：

:root {--w: 8vmin;/*** change width  ***/--h: 15vmin;/*** change height ***/--m: 8vmin;/*** change margin ***/--s: 1.25s;/*** change speed  ***/
}body {margin: 0;padding: 0;background: radial-gradient(#311d54 15%, #000000 100%);font-family: 'Averia Sans Libre', Arial, sans-serif;overflow: hidden;
}.content {height: 100vh;width: 100vw;text-align: center;box-sizing: border-box;display: flex;justify-content: center;align-items: center;
}.pipe {width: var(--w);height: var(--w);background: linear-gradient(90deg, #be9aff, #673ab7);position: absolute;animation: grow var(--s) ease-in-out 0s infinite alternate;z-index: 50;box-shadow: 1vmin 15vmin 5vmin 0vmin #00000020;filter: hue-rotate(-15deg);
}.pipe:before,
.pipe:after {content: "";width: 100%;height: calc(var(--w) / 2);background: #be9aff;position: absolute;left: 0;top: calc(calc(var(--w) / 4) * -1);border-radius: 100%;
}.pipe:after {top: inherit;bottom: calc(calc(var(--w) / 4) * -1);background: linear-gradient(90deg, #be9aff, #673ab7);
}@keyframes grow {0% {height: var(--w);filter: hue-rotate(-15deg) brightness(0.85);}100% {height: var(--h);filter: hue-rotate(-25deg) brightness(1.15);}
}.pipe:nth-child(1n+2) {animation-delay: 0.2s
}.pipe:nth-child(1n+8) {animation-delay: 0.4s
}.pipe:nth-child(1n+20) {animation-delay: 0.6s
}.pipe:nth-child(1n+38) {animation-delay: 0.8s
}.pipe:nth-child(1n+62) {animation-delay: 1s
}

HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Hexagonal Breathing Grid - Pure CSS</title><link rel="stylesheet" href="css/style.css"></head><body><div class="content"><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div></div></body></html>