如何用CSS做六边形图片/蜂巢形图集（详解） |
您所在的位置：网站首页 › 六边形照片打印怎么设置 › 如何用CSS做六边形图片/蜂巢形图集（详解） |
如何用CSS做六边形图片/蜂巢形图集（详解）
|
目标效果：
要达到蜂巢形的图集展示，实质上就是做六边形图片。 实现思路： 1.一个大div内有两个子div，分别将两个div顺时针和逆时针旋转60度，形成六边形； 2.给三个div加同一个背景，调节背景大小和位置，使得三张图片完全重合，形成六边形图片效果； 3.复制粘贴5个六边形，并做flex布局。 第一步：画出3个div
第二步： 2-1 给1一个div加同一个背景图片并调节位置，大小： 2-2 给另外两个div也加上背景，并调节角度：
2-3 调节背景图片位置，使得三张图片完全重合，形成六角形图片效果：
附上单个六边形完整代码： bee .rotate{ position:relative; height:110px; width:190px; margin:100px 10px; background:url('./face.jpg'); /*给div设置背景图*/ background-size:auto 220px; /*六边形上下两个对角是220，所以需要保证图片有220px*/ background-position: -15px -55px; /*图片需要上移15px，左移55px才能保证后期和另外两个div的背景重叠时能构成一张完整的图*/ } .common{ position: absolute; height:100%; width:100%; overflow: hidden; left:0; } .common:before{ content:''; position: absolute; background:url('./face.jpg') 50% 50% no-repeat; background-size:auto 220px; width:190px; height:220px; } .green{ transform: rotate(60deg); /*绿色div顺时针旋转60°*/ /* border:3px solid green; */ } .green:before{ transform: rotate(-60deg) translate(48px,-28px) } .red{ transform: rotate(-60deg); /*红色div逆时针旋转60°*/ /* border:1px solid red; */ } .red:before{ transform: rotate(60deg) translate(-48px,-28px) }第三步：布局
3-1 复制粘贴5个六边形，并将上面三个六边形和下面两个分别放进a标签后再放入父div内： 3-2 flex布局，调整六边形位置，并加上鼠标悬停动画： .box{ display: flex; justify-content:center; /*子元素的六边形居中显示*/ } .box1{ margin-top:80px; /*调节第一行六边形距离浏览器顶部位置*/ } .rotate:hover{ transform:translate(-5px,-5px); /*当鼠标hover在六边形上时向左上位移5px*/ }最后，附上完整代码： bee .box{ display: flex; justify-content:center; /*子元素的六边形居中显示*/ } .box1{ margin-top:80px; /*调节第一行六边形距离浏览器顶部位置*/ } .rotate{ position:relative; height:110px; width:190px; margin:37px 10px; background:url('./face.jpg'); /*给div设置背景图*/ background-size:auto 220px; /*六边形上下两个对角是220，所以需要保证图片有220px*/ background-position: -15px -55px; /*图片需要上移15px，左移55px才能保证后期和另外两个div的背景重叠时能构成一张完整的图*/ } .rotate:hover{ transform:translate(-5px,-5px); /*当鼠标hover在六边形上时向左上位移5px*/ } .common{ position: absolute; height:100%; width:100%; overflow: hidden; left:0; } .common:before{ content:''; position: absolute; background:url('./face.jpg') 50% 50% no-repeat; background-size:auto 220px; width:190px; height:220px; } .green{ transform: rotate(60deg); /*绿色div顺时针旋转60°*/ /* border:3px solid green; */ } .green:before{ transform: rotate(-60deg) translate(48px,-28px) } .red{ transform: rotate(-60deg); /*红色div逆时针旋转60°*/ /* border:1px solid red; */ } .red:before{ transform: rotate(60deg) translate(-48px,-28px) }如有不妥之处，欢迎交流指正！ |
【本文地址】
今日新闻 |
推荐新闻 |