最近在做六边形列表,看到老外写的一个,感觉很不错。
https://github.com/web-tiki/responsive-grid-of-hexagons
demo:https://codepen.io/web-tiki/pen/HhCyd
这个可以容易的嵌入背景图片,只是会被放大些许。
优点是:可以自适应。
缺点是:需要手动在css代码例如设置每行有多少个六边形,然后调整布局。
我在这个基础上调整了下代码,以后用起来方便的。
使用方法:
1、嵌入css
<link href="css/hexagon.css" rel="stylesheet" type="text/css">
2、写入html(六边形角朝上)
<div style="width:90%; margin:0 auto; background-image:url(images/bg.jpg); background-size:cover;">
<ul class="hex-grid-vert col-vert-set">
<li><div><img src="images/01.jpg" /><h1>盾娘</h1><p>玛修·基列莱特,假想宝具疑似展开/人理之础</p></div></li>
<li><div><img src="images/02.jpg" /><h1>棉被</h1><p>阿尔托莉雅·潘德拉贡,誓约胜利之剑</p></div></li>
<li><div><img src="images/03.jpg" /><h1>Lily</h1><p>阿尔托莉雅·潘德拉贡,必胜黄金之剑</p></div></li>
<li><div><img src="images/13.jpg" /></div></li>
<li><div><img src="images/14.jpg" /></div></li>
<li><div><img src="images/15.jpg" /></div></li>
<li><a href="#"><img src="images/04.jpg" /><h1>红saber</h1><p>尼禄·克劳狄乌斯,童女讴歌的华丽帝政</p></a></li>
<li><a href="#"><img src="images/05.jpg" /><h1>红茶</h1><p>英灵卫宫,无限剑制</p></a></li>
<li><a href="#"><img src="images/06.jpg" /><h1>金闪闪</h1><p>吉尔伽美什,开天辟地乖离之星</p></a></li>
<li><div><img src="images/07.jpg" /><h1>大狗</h1><p>库·丘林,刺穿死棘之枪</p></div></li>
<li><div><img src="images/08.jpg" /><h1>伊丽莎白·巴托丽</h1><p>伊丽莎白·巴托丽,鲜血魔娘</p></div></li>
<li class="clr"></li>
<li><div><img src="images/09.jpg" /><h1>美杜莎</h1><p>美杜莎,骑英之缰绳</p></div></li>
<li class="clr"></li>
<li><div><img src="images/10.jpg" /><h1>幼帝</h1><p>亚历山大,初行的蹂躏制霸</p></div></li>
<li><div><img src="images/11.jpg" /><h1>圣女玛尔达</h1><p>圣女玛尔达,不觉爱的悲哀之龙啊</p></div></li>
<li><div><img src="images/12.jpg" /><h1>C妈</h1><p>美狄亚,万符必将破戒</p></div></li>
<li><div><img src="images/16.jpg" /><h1>贞德</h1><p>贞德,吾的神明在此</p></div></li>
</ul></div>
3、根据每行数量,修改css(六边形角朝上)
.col-vert-set li{
width: 27.85714285714286%;/* =(100-spacing)/number */
padding-bottom: 32.16760145166612%;/* =width/sin(60deg);appr width/0.866 */
}
其中,宽=(100-所有间距)/数量
padding-bootom=宽/sin(60),sin(60deg)约等于0.866
这个时候看到的是这样的
4、根据设定,调整间距
.col-vert-set li:nth-child(3n+2) {
margin: 0 1%;
}
.col-vert-set li:nth-child(6n+4) {
margin-left: 0.5%;
}
.col-vert-set li:nth-child(6n+4), .col-vert-set li:nth-child(6n+5), .col-vert-set li:nth-child(6n+6) {
margin-top: -6.9285714285%;
margin-bottom: -6.9285714285%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.col-vert-set li:nth-child(6n+4):last-child, .col-vert-set li:nth-child(6n+5):last-child, .col-vert-set li:nth-child(6n+6):last-child {
margin-bottom: 0%;
}
显示结果如下:
5、如果是六边形角朝左右
大体上差不多,html代码多嵌套了一个div,宽=(100-所有间距)/数量*sin(60deg)
最终效果如下:
6、其他
可以在某个位置不显示六边形,只要在代码里写入
<li class="clr"></li>
鼠标经过的时候,有遮罩并且带动画
总体而已,觉得是个很不错的六边形实现方式。
我整理的代码:http://download.csdn.net/detail/wuyt2008/9680379