使用CSS实现六边形的图片效果
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
前言
在CodePen上看到一个有意思的效果:
这个效果的难点在于六边形的绘制, 那么接下来我们就一起来看下作者是怎么实现他的吧
实现思路
- 使用
grid进行布局, 水平、垂直居中显示 - 使用
clip-path: polygon()来绘制图片六边形 - 使用
transform: translate()定位六边形的位置 - 使用
filter: grayscale(80%)对图片进行滤镜, 将图片转为灰度图像 - 鼠标浮动缩放效果
都是我们平时开发中不常用到的CSS3属性, 那么我们先来简单的介绍下吧
1、网格布局grid
要使 HTML 元素变成一个网格容器，可以将 display 属性设置为 grid 或 inline-grid。
网格容器内放置着由列和行内组成的网格元素。
属性:
1、grid-template-columns
定义了网格布局中的列的数量，它也可以设置每个列的宽度。
2、grid-template-rows
定义了网格布局中的行的数量，它也可以设置每一行的高度。
3、grid-areas
指定网格元素在网格布局中的大小和位置, 是以下属性的简写属性: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
4、justify-content
属性用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。
5、align-content
属性用于设置垂直方向上的网格元素在容器中的对齐方式。
6、place-content
属性指定网格元素水平、垂直方向元素分布方式
2、var() 函数
定义: var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
语法: var(custom-property-name, value)
实例:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
3、clip-path
使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。
polygon( , , …, ) 定义了每一个点的坐标，起点是从左上角开始计算的，可以用百分百，也可以用px等单位。
代码实现
HTML
<div class="gallery-container">
<div class="gallery">
<img
src="https://picsum.photos/id/1040/300/300"
alt="a house on a mountain"
/>
<img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers" />
<img
src="https://picsum.photos/id/136/300/300"
alt="big rocks with some trees"
/>
<img
src="https://picsum.photos/id/1039/300/300"
alt="a waterfall, a lot of tree and a great view from the sky"
/>
<img src="https://picsum.photos/id/110/300/300" alt="a cool landscape" />
<img
src="https://picsum.photos/id/1047/300/300"
alt="inside a town between two big buildings"
/>
<img
src="https://picsum.photos/id/1057/300/300"
alt="a great view of the sea above the mountain"
/>
</div>
</div>
CSS
.gallery-container {
min-height: 100vh;
display: grid;
place-content: center; /* 水平垂直方向居中 */
background: #aabbfb;
}
.gallery {
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
display: grid;
}
.gallery > img {
grid-area: 1/1; /* 规定从第一行第一列开始显示项目 */
width: var(--s);
aspect-ratio: 1.15; /* 宽高比例缩放 */
object-fit: cover; /* 保持图片原有比例, 会有剪切*/
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
transform: translate(var(--_x, 0), var(--_y, 0)) scale(var(--_t, 1)); /* 对图片进行移动和缩放 */
cursor: pointer;
filter: grayscale(80%); /* 灰度滤镜 */
transition: 0.2s linear; /* 过渡效果 */
}
.gallery > img:hover {
filter: grayscale(0);
z-index: 1;
--_t: 1.2;
}
.gallery > img:nth-child(1) {
--_y: calc(-100% - var(--g));
}
.gallery > img:nth-child(7) {
--_y: calc(100% + var(--g));
}
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) {
--_x: calc(-75% - 0.87 * var(--g));
}
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) {
--_x: calc(75% + 0.87 * var(--g));
}
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) {
--_y: calc(-50% - 0.5 * var(--g));
}
.gallery > img:nth-child(5),
.gallery > img:nth-child(6) {
--_y: calc(50% + 0.5 * var(--g));
}
附图一张, 帮助理解元素移动位置
到此这篇关于使用CSS实现六边形的图片效果的文章就介绍到这了,更多相关css六边形图片内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
- 这篇文章主要介绍了CSS实现图片背景填充的六边形的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-30
这篇文章主要介绍了css实现六边形图片的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-30
这篇文章主要介绍了CSS 实现蜂巢/六边形图集的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2020-03-05
本文给大家分享css画正六边形的两种方法，每种方法都不错，需要的朋友跟随程序员之家小编一起看看吧2018-07-06- 这篇文章主要介绍了纯css绘制蜂巢六边形效果,需要的朋友可以参考下2014-05-08
纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)
在之前的文章中曾经写到过一篇“三角形变形记之纯css实现的分布导航条效果”，其中用到了边框实现三角形的效果。最近又折腾了一个六边形的蜂窝效果给大家蹂躏。主要用到了2013-02-05
最新评论