css制作蜂巢

使用CSS制作蜂巢效果

蜂巢效果可以通过CSS的clip-path属性或transform属性实现。以下是两种常见方法：

方法一：使用clip-path

通过clip-path的polygon函数定义六边形路径，创建单个蜂巢单元：

.hexagon {
  width: 100px;
  height: 110px;
  background-color: #f0a30a;
  clip-path: polygon(
    50% 0%, 
    100% 25%, 
    100% 75%, 
    50% 100%, 
    0% 75%, 
    0% 25%
  );
  margin: 5px;
  display: inline-block;
}

方法二：使用transform旋转

通过旋转正方形元素并叠加实现六边形效果：

.hexagon {
  width: 60px;
  height: 104px;
  position: relative;
  background-color: #6a6;
  margin: 30px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 52px solid #6a6;
}

.hexagon:after {
  top: 100%;
  border-top: 52px solid #6a6;
}

创建蜂巢网格

将多个六边形排列成蜂窝状布局：

.hex-grid {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  margin: 0 auto;
}

.hex-row {
  display: flex;
  margin-left: 50px;
}

.hex-row:nth-child(even) {
  margin-left: 100px;
}

响应式调整

添加媒体查询使蜂巢适应不同屏幕尺寸：

@media (max-width: 768px) {
  .hexagon {
    width: 50px;
    height: 86.6px;
  }

  .hex-row:nth-child(even) {
    margin-left: 75px;
  }
}

动画效果

为蜂巢单元添加悬停动画：

.hexagon {
  transition: transform 0.3s, opacity 0.3s;
}

.hexagon:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

这些方法可以组合使用，根据具体需求调整尺寸、颜色和排列方式，创建出各种风格的蜂巢布局效果。