教你做炫酷的蜂巢式图片墙

之前博主写了几篇博文都是属于前端基础技术的总结，这个周末打算发布两到三篇博文来给大家点“干货”。

之所以把话说这么早其实是想给自己点压力，免得又偷懒跳票了....

几个月前浏览过一个外国的扁平化网站，里面的正六边形图片很炫酷，给了我很深的印象，这两天试着做了下。

废话不多说，奉上我的随兴之作！

看到这里，我想先说一句：MH的猎友们！请！顶！我！

六边形的图片墙，它的好处在哪呢？普通正方形的图片排版起来比较死板，没有新意。而正六边形的图片不仅显得很炫酷，而且还有其特殊的规则感。

有的人肯定会说了，我直接拿PS切一个出来不就好了？干嘛还要用代码写？答案就是当你把框架写好了，只需要更换图片地址url即可，而不需要每一张都要处理，关键是代码也比较简单。

首先我们先分析一下：

怎么做一个六边形？其实是三个矩形div旋转得到的，例如中间横着的矩形。

先假定所需的边长为：100px，那矩形的宽，也就是红线所示为多长？对角线为2倍边长，所以宽为根号3倍的边长，大概是173px。

结构如下：

<div class="box"><div class="first"></div><div class="second"></div><div class="third"></div>
</div>

这里外面包了个类名为box的div是为了方便多个六边形时布局，不用太过关注。

将三个div绝对定位，以使它们重合。并正逆方向旋转其中两个：

 .first{height: 100px;width: 173px;background-color: red;position: absolute;}.second{height: 100px;width: 173px;background-color: blue;position: absolute;-webkit-transform:rotate(60deg);}.third{height: 100px;width: 173px;background-color: green;position: absolute;-webkit-transform:rotate(-60deg);}

得到正六边形：

接下来就是如何把图片也裁成六边形，先在第一个div中插入图片：

    <div class="box"><div class="first"><img class="firstImg" src="26_120414101155_1.jpg" width="173px" height="200px"></div><div class="second"></div><div class="third"></div></div>

注意：图片的宽度为div的宽度，高度为两倍div高度。为了图片不失真，最好把图片尺寸的高宽比裁为根号3比2的。

结果：

这里图片还需要向上移动一点，这里告诉大家一个秘诀，那就是上移div高度的一半刚刚好，不用大家算了。

 .firstImg{margin-top: -50px;}

然后设置父级div的overflow:hidden

结果：

加入第二张图片：

 <div class="box"><div class="first"><img class="firstImg" src="26_120414101155_1.png" width="173px" height="200px"></div><div class="second"><img class="secondImg" src="26_120414101155_1.png" width="173px" height="200px"></div><div class="third"></div></div>

注意插入的图片父级是旋转过的，所以需要让图片转回来，也就是转父级div相反的角度。

.secondImg{-webkit-transform:rotate(-60deg);}

结果：

怎么让它往右上呢？其实还是margin-top:-50px;这里要说下为什么，因为它的父级旋转过了。这时再将图片上移就不是我们视角的上方了，而是它“躺倒”了的爸爸div的上方。

然后让它的父级overflow:hidden

结果：

大家这下看出来了吧，其实是三张相同的图片用各自的部分拼出来的。

第三张同样做法：1.跟父级相反方向旋转 2.上移

大功告成：

边框怎么做？其实思考下就明白，六边形的边其实是三个div的左边框及右边框围成的。所以只用设置border-left及border-right。

但要注意最多3px，否则会出现缺口，像这样：

OK，接下来我把整理后的代码发给大家，只需要更改些参数即可，排版神马的自己创意吧。

HTML部分：

<div class="box"><div class="first"><img class="firstImg" src="" width="190px" height="220px"></div><div class="second"><img class="secondImg" src="" width="190px" height="220px"></div><div class="third"><img class="thirdImg"  src="" width="190px" height="220px"></div>
</div>

CSS部分：

 　　　　.box{height: 100px;width: 190px;display: inline-block;position: relative;}.first{height: 110px;width: 190px;background-color: #ee6557;position: absolute;overflow: hidden;z-index: 999999;border-left: 2px solid #c8a200;border-right :2px solid #c8a200;}.second{height: 110px;width: 190px;-webkit-transform:rotate(60deg);background-color:#ee6557;position: absolute;overflow: hidden;border-left: 2px solid #c8a200;border-right :2px solid #c8a200;}.third{height: 110px;width: 190px;-webkit-transform:rotate(-60deg);background-color: #ee6557;position: absolute;overflow: hidden;border-left: 2px solid #c8a200;border-right :2px solid #c8a200;}.firstImg{margin-top: -55px;}.secondImg{-webkit-transform:rotate(-60deg);margin-top: -55px;}.thirdImg{-webkit-transform:rotate(60deg);margin-top: -55px;}

感谢您的浏览，希望能对您有所帮助。

转载于:https://www.cnblogs.com/ghost-xyx/p/3788438.html

教你做炫酷的蜂巢式图片墙相关推荐

html5自动换图,html5教你做炫酷的碎片式图片切换 (canvas)
前言老规矩,先上源码.图片区域是可以点击的,动画会从点击的位置开始发生. 本来这个效果是我3年前做的,只是当是是用无数个 div 标签完成的,性能比较成问题,在移动端完全跑不动.最近心血来潮想学习一 ...
可视化实战！Python+BI，手把手教你做炫酷的NBA可视化分析
之前手痒做了一次NBA可视化分析,好多人追着我问教程,这两天终于闲下来了,花时间整理这篇NBA可视化分析教程,手把手教大家做一次炫酷的数据可视化分析! 先部分展示本次教程的作品: 数据获取本次可视化 ...
python做bi系统_可视化实战！Python+BI，手把手教你做炫酷的NBA可视化分析
之前手痒做了一次NBA可视化分析,好多人追着我问教程,这两天终于闲下来了,花时间整理这篇NBA可视化分析教程,手把手教大家做一次炫酷的数据可视化分析! 先部分展示本次教程的作品: 数据获取本次可视化 ...
举个栗子！Tableau 技巧（138）：学做炫酷的温度计图表
来自北京的气象分析师提了一个需求:我经常分析温度数据,Tableau 可否实现像温度计那样的图表? 图片来自网络当然,温度计图表在 Tableau 中可以实现!并且,它不仅可以用来呈现温度数据,还适 ...
图片动画效果html5,8个实用炫酷的HTML5图片动画应用
原标题:8个实用炫酷的HTML5图片动画应用近期我们发布了不少关于HTML5和jQuery的图片动画应用,很多都比较实用,也有一些效果非常炫酷,比如一些HTML5 3D图片动画特效.本文精选了8个实 ...
html img 圆头像_纯CSS3炫酷圆形头像图片过滤特效
这是一款效果非常酷的纯CSS3炫酷圆形头像图片过滤特效.该特效将图片制作为圆形图片,以网格形式布局,带点击相应的分类按钮后,该类别的图片被放大显示,其它类别的图片被缩小,效果非常的不错. 制作方法 H ...
android自定义图片过渡效果,教你做出炫酷的Android动画效果
前言 Android动画也是Android系统中一个很重要的模块, 在平时开发中, 为了做出炫酷的效果, 动画可以说是必不可少的; 本文将总结Android中与动画相关的部分, 文中部分内容整理自文末 ...
手把手教你用Flutter做炫酷动画
导读:随着技术的发展,很多网页开发技术都带有动画效果,比如淡入淡出.渐变.变大变小,等等.Flutter中的动画效果可以用酷炫来形容,这也是Flutter的一大特色.现代的应用程序不仅仅需要程序稳定. ...
python 词云手把手_手把手教你生成炫酷的词云
前言: 话说,在这个大数据时代,获取信息显得极为容易,可正是如此,我们想要对信息进行直观地了解难度就大了.Excel是一个很好的数据可视化方法,不过有时候我们的数据来源可能并不是一张或者多张Excel ...

教你做炫酷的蜂巢式图片墙

教你做炫酷的蜂巢式图片墙相关推荐

最新文章

热门文章