纯css实现蜂窝效果

在这里插入图片描述

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>蜂窝效果</title><style>body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #f0f0f0;}.honeycomb {display: flex;flex-direction: column;align-items: center;width: 700px;height: 400px;overflow: hidden;padding-left: 310px;scroll-behavior: smooth}.hexagon::before {content: '';position: absolute;top: 2px;left: 2px;width: calc(100% + -4px);height: calc(100% + -4px);background-color: white;clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);z-index: -1;}.honeycomb:has(.hexagon:hover) .scroll-content {animation-play-state: paused;}.scroll-content {animation: 20s linear 0s infinite alternate moveing;}@keyframes moveing {0% {transform: translateX(0);}25% {transform: translateX(-15%);}50% {transform: translateX(-25%);}75% {transform: translateX(-15%);}100% {transform: translateX(0);}}.row {display: flex;justify-content: center;margin-bottom: -36px;}.hexagon {width: 98px;height: 84px;background-color: #000;clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);margin: 0 36px;transition: all 0.3s ease;position: relative;overflow: hidden;}.hexagon:hover {transform: scale(1.2);z-index: 2;}.hexagon:hover+.hexagon {transform: scale(0.9);}</style></head><body><div class="honeycomb" id="honeycomb"><div class="scroll-content"><div class="row"><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div></div><div class="row"><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div></div><div class="row"><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div></div><div class="row"><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div></div><div class="row"><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div></div><div class="row"><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div><div class="hexagon"><div class="highlight"></div></div></div><div class="row"><div class="hexagon"><div class="highlight"></div></div></div></div></div></body></html>