其他代码
纯CSS响应式六边形网格布局
PetitQ
hexagons.css 是一款纯 CSS3 响应式六边形网格布局系统。通过 hexagons.css 预设的样式，可以非常轻松的制作出六边形图片网格布局。它的特点还有：
六边形网格会根据容器的宽度自动调整。
也想出现在这里？联系我们吧
六边形网格会保持它们的比例。
每行的六边形图片会在不同的断点时从 5 个变化到 2 个。
鼠标滑过六边形时带有标题动画效果。
当前点击的六边形会被高亮，并且可以通过 Tab 键来切换到下一个六边形。
使用方法
使用该响应式六边形网格布局需要在页面中引入 hexagons.css 文件。
<link href="path/to/hexagons.css" rel="stylesheet">
HTML 结构
该响应式六边形网格布局使用无序列表作为它的 HTML 结构：
<ul id="hexGrid">
<li class="hex">
<a class="hexIn" href="#">
<img src="img/1.jpg" alt="" />
<h1>标题</h1>
<p>内容描述</p>
</a>
</li>
......</ul>
自定义六边形网格，六边形的鼠标滑过效果定义在 hexagons.css 文件中。你可以定义自己的鼠标滑过效果。在 CSS 文件中通过 media queries（媒体查询）来控制每行的六边形数量。六边形间隙和尺寸的计算方法，六边形的宽度的计算公式如下：
w = (100 - m) / n
其中：
w 代表六边形的宽度。
m 代表奇数行六边形的数量。
n 代表左侧和右侧 margin 值。
六边形的高度根据.hex 元素的底部 padding 值来定义。
height = width * sin(60deg)
六边形的水平间距设置为 1%的六边形宽度，每一行的第一个六边形都被设置一个左 margin 值。
m = (w + s)/2
其中：
m 代表每行第一个六边形的左外边距。
w 代表行六边形的宽度。
s 代表六边形的间隙。
六边形的垂直间距与水平间距相同，顶部和底部的外边距为负值。
m = - h + h * cos(60deg) + s * sin (60deg)
m = - h + h * cos(60deg) + s * sin (60deg)
其中：
m 代表顶部和底部的外边距。
h 代表行六边形高度的 1/2。
s 代表六边形的水平间隙。
github 地址：https://github.com/web-tiki/responsive-grid-of-hexagons
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
