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代表行六边形高度的1/2。s代表六边形的水平间隙。
hexagons.css响应式六边形网格布局的github地址为：https://github.com/web-tiki/responsive-grid-of-hexagons。
网盘下载密码:ydej
