成都web前端培训
成都达内金融街中心

18628200088

热门课程

响应式六边形网格代码分享

  • 时间:2016-06-30 13:57
  • 发布:达内杨老师
  • 来源:达内

成都达内分享——六边形网格会根据容器的宽度自动调整。

六边形网格会保持它们的比例。

每行的六边形图片会在不同的断点时从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(媒体查询)来控制每行的六边形数量。

六边形间隙和尺寸的计算方法

六边形的宽度的计算公式如下:

1

w = (100 - m) /

其中:

w代表六边形的宽度。

m代表奇数行六边形的数量。

n代表左侧和右侧margin值。

六边形的高度根据.hex元素的底部padding值来定义。

1

height = width * sin(60deg)              

六边形的水平间距设置为1%的六边形宽度,每一行的第一个六边形都被设置一个左margin值。

1

m = (w + s)/2

其中:

m代表每行第一个六边形的左外边距。

w代表行六边形的宽度。

s代表六边形的间隙。

六边形的垂直间距与水平间距相同,顶部和底部的外边距为负值。

1

m = - h + h * cos(60deg) + s * sin (60deg)

其中:

m代表顶部和底部的外边距。

h代表行六边形高度的1/2。

s代表六边形的水平间隙。

上一篇:顶部滚动视觉差特效代码
下一篇:Div与span配合css的前端
选择城市和中心
贵州省

广西省

海南省