使用CSS實(shí)現(xiàn)六邊形的圖片效果
我要評(píng)論前言
在CodePen上看到一個(gè)有意思的效果:
這個(gè)效果的難點(diǎn)在于六邊形的繪制, 那么接下來(lái)我們就一起來(lái)看下作者是怎么實(shí)現(xiàn)他的吧
實(shí)現(xiàn)思路
- 使用
grid進(jìn)行布局, 水平、垂直居中顯示 - 使用
clip-path: polygon()來(lái)繪制圖片六邊形 - 使用
transform: translate()定位六邊形的位置 - 使用
filter: grayscale(80%)對(duì)圖片進(jìn)行濾鏡, 將圖片轉(zhuǎn)為灰度圖像 - 鼠標(biāo)浮動(dòng)縮放效果
都是我們平時(shí)開(kāi)發(fā)中不常用到的CSS3屬性, 那么我們先來(lái)簡(jiǎn)單的介紹下吧
1、網(wǎng)格布局grid
要使 HTML 元素變成一個(gè)網(wǎng)格容器，可以將 display 屬性設(shè)置為 grid 或 inline-grid。
網(wǎng)格容器內(nèi)放置著由列和行內(nèi)組成的網(wǎng)格元素。
屬性:
1、grid-template-columns
定義了網(wǎng)格布局中的列的數(shù)量，它也可以設(shè)置每個(gè)列的寬度。
2、grid-template-rows
定義了網(wǎng)格布局中的行的數(shù)量，它也可以設(shè)置每一行的高度。
3、grid-areas
指定網(wǎng)格元素在網(wǎng)格布局中的大小和位置, 是以下屬性的簡(jiǎn)寫(xiě)屬性: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
4、justify-content
屬性用于對(duì)齊容器內(nèi)的網(wǎng)格，設(shè)置如何分配順著彈性容器主軸(或者網(wǎng)格行軸) 的元素之間及其周?chē)目臻g。
5、align-content
屬性用于設(shè)置垂直方向上的網(wǎng)格元素在容器中的對(duì)齊方式。
6、place-content
屬性指定網(wǎng)格元素水平、垂直方向元素分布方式
2、var() 函數(shù)
定義: var() 函數(shù)用于插入自定義的屬性值，如果一個(gè)屬性值在多處被使用，該方法就很有用。
語(yǔ)法: var(custom-property-name, value)
實(shí)例:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
3、clip-path
使用裁剪方式創(chuàng)建元素的可顯示區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏?？梢灾付ㄒ恍┨囟ㄐ螤?。
polygon( , , …, ) 定義了每一個(gè)點(diǎn)的坐標(biāo)，起點(diǎn)是從左上角開(kāi)始計(jì)算的，可以用百分百，也可以用px等單位。
代碼實(shí)現(xiàn)
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; /* 規(guī)定從第一行第一列開(kāi)始顯示項(xiàng)目 */
width: var(--s);
aspect-ratio: 1.15; /* 寬高比例縮放 */
object-fit: cover; /* 保持圖片原有比例, 會(huì)有剪切*/
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)); /* 對(duì)圖片進(jìn)行移動(dòng)和縮放 */
cursor: pointer;
filter: grayscale(80%); /* 灰度濾鏡 */
transition: 0.2s linear; /* 過(guò)渡效果 */
}
.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));
}
附圖一張, 幫助理解元素移動(dòng)位置
到此這篇關(guān)于使用CSS實(shí)現(xiàn)六邊形的圖片效果的文章就介紹到這了,更多相關(guān)css六邊形圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS實(shí)現(xiàn)圖片背景填充的六邊形的示例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)圖片背景填充的六邊形的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-30
這篇文章主要介紹了css實(shí)現(xiàn)六邊形圖片的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-30
CSS 實(shí)現(xiàn)蜂巢/六邊形圖集的示例代碼
這篇文章主要介紹了CSS 實(shí)現(xiàn)蜂巢/六邊形圖集的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2020-03-05
本文給大家分享css畫(huà)正六邊形的兩種方法，每種方法都不錯(cuò)，需要的朋友跟隨腳本之家小編一起看看吧2018-07-06- 這篇文章主要介紹了純css繪制蜂巢六邊形效果,需要的朋友可以參考下2014-05-08
純css實(shí)現(xiàn)的六邊形(蜂窩)導(dǎo)航效果(支持hover/兼容瀏覽器)
在之前的文章中曾經(jīng)寫(xiě)到過(guò)一篇“三角形變形記之純css實(shí)現(xiàn)的分布導(dǎo)航條效果”，其中用到了邊框?qū)崿F(xiàn)三角形的效果。最近又折騰了一個(gè)六邊形的蜂窩效果給大家蹂躪。主要用到了2013-02-05
