使用CSS实现六边形的图片效果_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

前言

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实现图片背景填充的六边形的示例代码
  • css实现六边形图片的示例代码
  • css 实现蜂巢/六边形图集的示例代码
  • css画正六边形的两种方法
  • 纯css绘制蜂巢六边形效果
  • 纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)
  • css请问一下10个小图片怎样排列成这样,求大神,不用图片地图...
  • 怎么用图片装饰博客
  • 谁有axure RP 5的教程,能有实例解析的那种,跪求!!!!!
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程css六边形图片纯css绘制蜂巢六边形效果纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css自定义select下拉选择框的样式(不用其他标签模拟)css 漂亮搜索框美化代码css 中的background:transparent到底是什么意思有什么css圆角效果 -webkit-border-radius(css3中border-radcss 首行缩进两个文字使用css实现六边形的图片效果el-form每行显示两列底部按钮居中效果的实现纯css打字动画的实现示例新的css 伪类函数 :is() 和 :where()示例详解详解flex:1什么意思css子盒子水平和垂直居中的五种方法css让页脚保持在底部位置的四种方案纯css实现一个简单步骤条的示例代码css中使用grid布局实现一套模板多种布局
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved