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