您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“怎么使用CSS實(shí)現(xiàn)酷炫六邊形網(wǎng)格背景圖”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“怎么使用CSS實(shí)現(xiàn)酷炫六邊形網(wǎng)格背景圖”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
首先,看到這樣一個(gè)圖形,如果想要使用一個(gè)標(biāo)簽完成整個(gè)背景,最先想到的肯定是使用背景 background 實(shí)現(xiàn),不過可惜的是,盡管 CSS 中的 background 非常之強(qiáng)大,但是沒有特別好的方式讓它足以批量生成重復(fù)的六邊形背景。
因此,在這個(gè)需求中,我們可能不得不退而求其次,一個(gè)六邊形實(shí)現(xiàn)使用一個(gè)標(biāo)簽完成。
那么,就拿 1 個(gè) DIV 來說,我們有多少實(shí)現(xiàn)六邊形的方式呢?這里簡(jiǎn)單介紹 2 種方式:
使用 border 實(shí)現(xiàn)六邊形
使用 clip-path 實(shí)現(xiàn)六邊形
首先,使用 border 實(shí)現(xiàn)六邊形。這里的核心在于上下兩個(gè)三角形疊加中間一個(gè)矩形。這里,利用元素的兩個(gè)偽元素實(shí)現(xiàn)上下兩個(gè)三角形,從而讓這個(gè)元素看起來像一個(gè)六邊形。
思路比較簡(jiǎn)單,直接上代碼:
.hexagon {
position: relative;
width: 200px;
height: 100px;
background-color: red;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 50px solid red;
}
.hexagon:after {
top: 100%;
border-top: 50px solid red;
}
上面的代碼會(huì)創(chuàng)建一個(gè)寬度為 200 像素,高度為 100 像素的六邊形,其中由兩個(gè)三角形和一個(gè)矩形組成。使用偽元素的優(yōu)點(diǎn)是可以很方便地控制六邊形的大小、顏色等樣式。
當(dāng)然,上述的代碼不是一個(gè)正六邊形,這是因?yàn)檎呅沃校?strong>元素的高是元素的寬的 1.1547 倍。
并且,上述的方式也稍微復(fù)雜了點(diǎn),因此,在今天,我們更推薦使用 clip-path
的方式去實(shí)現(xiàn)一個(gè)六邊形:
.clippath {
--w: 100px;
width: var(--w);
height: calc(var(--w) * 1.1547);
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
background: deeppink;
margin: auto;
}
這樣,基于 clip-path
,也能快速得到一個(gè)六邊形圖形:
好了,有了上一步的鋪墊之后,接下來我們要做的,就是繪制多個(gè)六邊形,組成背景。
但是我們仔細(xì)觀察一下由多個(gè)六邊形組成的背景,會(huì)發(fā)現(xiàn)每雙數(shù)行的的六邊形,需要向右側(cè)有一個(gè)明顯的縮進(jìn),寬度大概為單個(gè)六邊形的寬度的一半:
這里其實(shí)是一個(gè)非常棘手的問題。首先,我們會(huì)想到這樣一種解決方案:
每一行為一組,設(shè)置一個(gè)父 div 容器,填滿六邊形元素,設(shè)置元素不換行
給偶數(shù)行設(shè)置一個(gè)固定的 margin-left
基于這個(gè)策略,我們的代碼,大概會(huì)是這樣:
<div class="container">
<div class="wrap">
// ... 填滿六邊形
</div>
<div class="wrap" style="margin-left: 25px">
// ... 填滿六邊形
</div>
<div class="wrap">
// ... 填滿六邊形
</div>
<div class="wrap" style="margin-left: 25px">
// ... 填滿六邊形
</div>
</div>
可以看到,我們給偶數(shù)行,都添加了一個(gè) margin-left
。
但是這個(gè)代碼,會(huì)有幾個(gè)問題:
我們的頁面寬度不一定是固定的,那么每一行設(shè)置多少個(gè)子六邊形元素比較合適呢?設(shè)置多了勢(shì)必會(huì)帶來浪費(fèi),少了又無法滿足需求
多了一層嵌套,代碼邏輯更為復(fù)雜
什么意思呢?也就是效果可能在屏幕非常寬的情況下,失效。
看看,正常情況,我們?cè)O(shè)置了每行 20 個(gè)六邊形,下圖是正常的
但是如果我們的屏幕特別寬,那么,可能會(huì)得到這樣一種效果:
因此,這種方式存在非常大的弊端,我們希望能有一整布局方式,能夠滿足我們?nèi)缦聝蓚€(gè)訴求:
所有六邊形代碼寫在一個(gè)父容器下
這個(gè)彈性布局中,第二行的元素最左邊,能夠?qū)崿F(xiàn)固定一個(gè)縮進(jìn)
有的!在 CSS 中,有一個(gè)神奇的元素能夠讓元素以非直線形式排布。它就是 shape-outside
!
shape-outside
是 CSS 中的一個(gè)屬性,用于控制元素的浮動(dòng)方式。它允許你定義一個(gè)元素浮動(dòng)時(shí)周圍元素的形狀。例如,你可以使用 shape-outside
屬性來定義一個(gè)元素浮動(dòng)時(shí)周圍元素的形狀為圓形、六邊形等。
它和 clip-path
的語法非常類似,很容易觸類旁通??纯磳?shí)例,更易理解:
假設(shè)我們有下面這樣的結(jié)構(gòu)存在:
<div class="container">
<div class="shape-outside">
<img src="image.png">
</div>
xxxxxxxxxxx,文字描述,xxxxxxxxx
</div>
定義如下 CSS:
.shape-outside {
width: 160px;
height: 160px;
shape-outside: circle(80px at 80px 80px);
float: left;
}
注意,上面 .shape-outside
使用了浮動(dòng),并且定義了 shape-outside: circle(80px at 80px 80px)
,表示在元素的 (80px, 80px) 坐標(biāo)處,生成一個(gè) 80px 半徑的圓。
如此,將會(huì)產(chǎn)生一種圖文混排的效果:
總得來說,shape-outside
有兩個(gè)核心特點(diǎn):
shape-outside
屬性僅在元素定義了 float
屬性且不為 none
時(shí)才會(huì)生效
它能夠?qū)崿F(xiàn)了文字根據(jù)圖形的輪廓,在其周圍排列
shape-outside
的本質(zhì)劃重點(diǎn),劃重點(diǎn),劃重點(diǎn)。
所以,shape-outside
的本質(zhì)其實(shí)是生成幾何圖形,并且裁剪掉其幾何圖形之外周圍的區(qū)域,讓內(nèi)容能排列在這些被裁剪區(qū)域之內(nèi)。
所以,了解了這個(gè)本質(zhì)之后,我們?cè)賹⑺\(yùn)用在上面的六邊形布局之中。
為了方便理解,我們首先使用文字代替上面的六邊形,假設(shè)我們有這樣一段文本內(nèi)容:
<p>
Lorem ipsum dolor sit amet conse...
</p>
p {
line-height: 36px;
font-size: 24px;
}
非常平平無奇的一段代碼,效果如下:
現(xiàn)在,我們想利用 shape-outside
,讓文本內(nèi)容的偶數(shù)行,向內(nèi)縮進(jìn) 24px
,怎么實(shí)現(xiàn)呢?非常簡(jiǎn)單:
p {
position: relative;
line-height: 36px;
font-size: 24px;
&::before {
content: "";
height: 100%;
width: 24px;
shape-outside: repeating-linear-gradient(
transparent 0,
transparent 36px,
#000 36px,
#000 72px
);
float: left;
}
}
這樣,我們就實(shí)現(xiàn)了文字隔行縮進(jìn) 24px
的效果:
一定有小伙伴會(huì)很好奇,為什么呢?核心在于我們利用元素的偽元素實(shí)現(xiàn)了一個(gè) shape-outside
圖形,如果我們把這個(gè)圖形用 background
繪制出來,其實(shí)它長(zhǎng)這樣:
p {
position: relative;
line-height: 36px;
font-size: 24px;
&::before {
content: "";
height: 100%;
width: 24px;
shape-outside: repeating-linear-gradient(
transparent 0,
transparent 36px,
#000 36px,
#000 72px
);
float: left;
background: repeating-linear-gradient(
transparent 0,
transparent 36px,
#f00 36px,
#f00 72px
);
}
}
效果如下:
因?yàn)槲谋镜男懈呤?36px
,這樣我們以 72 為一段,每 36px 繪制一段透明,另外 36px 繪制一段寬為 24px 的內(nèi)容,這樣,結(jié)合 shape-outside
的特性,我們就實(shí)現(xiàn)了隔行將內(nèi)容向里面擠 24px
的效果!
非常的 Amazing 的技巧!完整的代碼你可以戳這里:
CodePen Demo -- Shape-outside achieves even line indentation
基于這個(gè)技巧,我們就可以實(shí)現(xiàn)上述我們想要的效果了。我們回到正題,重新實(shí)現(xiàn)一個(gè)充滿六邊形的背景:
<ul class="wrap">
<li></li>
//... 非常多個(gè) li
<ul>
:root {
--s: 50px; /* size */
--m: 4px; /* margin */
--perHeight: calc(calc(var(--s) * 2 * 1.1547) + calc(var(--m) * 4) - 0.4px)
}
.wrap {
position: relative;
height: 100%;
font-size: 0;
&::before {
content: "";
height: 100%;
width: 27px;
shape-outside: repeating-linear-gradient(
transparent 0,
transparent 70px,
#000 70px,
#000 var(--perHeight)
);
float: left;
}
}
li {
width: var(--s);
height: calc(var(--s) * 1.1547);
background: #000;
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
margin: var(--m);
display: inline-block;
}
借助 shape-outside
,我們就實(shí)現(xiàn)了隔行讓我們的六邊形向內(nèi)縮進(jìn)的訴求!效果如下:
當(dāng)然,有一些優(yōu)化點(diǎn):
為了讓兩邊不那么空,我們可以讓整個(gè)容器更寬一點(diǎn),譬如寬度為父元素的 120%
,然后水平居中,這樣,兩側(cè)的留白就解決了
讓兩行直接貼緊,可以設(shè)置一個(gè) margin-bottom
做完這兩點(diǎn)優(yōu)化之后,效果如下:
可以做到任意屏幕寬度下的六邊形完美平鋪布局:
有了上述的鋪墊后,要實(shí)現(xiàn)文章一開頭的效果就不難了。
是的,我們要實(shí)現(xiàn)這樣一個(gè)效果:
如何讓它們動(dòng)態(tài)的實(shí)現(xiàn)顏色變換呢?是給每一個(gè)六邊形一個(gè)單獨(dú)的顏色,然后進(jìn)行動(dòng)畫嗎?不,借助混合模式,我們可以非??焖俚膶?shí)現(xiàn)不同的顏色值。
首先,我們將上述效果,改成白底黑色六邊形色塊:
然后,利用父容器剩余的一個(gè)偽元素,我們疊加一層漸變層上去:
.wrap {
position: relative;
// 代碼與上述保持一致
&::before {
content: "";
// ... 實(shí)現(xiàn) shape-outside 功能,代碼與上述保持一致
}
&::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(45deg, #f44336, #ff9800, #ffe607, #09d7c4, #1cbed3, #1d8ae2, #bc24d6);
}
}
這樣,我們就疊加了一層漸變色彩層在原本的六邊形背景之上:
接著,只需要一個(gè)混合模式 mix-blend-mode: darken
,就能實(shí)現(xiàn)六邊形色塊與上層漸變顏色的融合效果:
.wrap {
position: relative;
// 代碼與上述保持一致
&::before {
content: "";
// ... 實(shí)現(xiàn) shape-outside 功能,代碼與上述保持一致
}
&::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(45deg, #f44336, #ff9800, #ffe607, #09d7c4, #1cbed3, #1d8ae2, #bc24d6);
z-index: 1;
+ mix-blend-mode: darken;
}
}
效果如下:
好, 我們?cè)俳o上層的漸變色塊,添加一個(gè) filter: hue-rotate()
動(dòng)畫,實(shí)現(xiàn)色彩的漸變動(dòng)畫:
.wrap {
position: relative;
// 代碼與上述保持一致
&::before {
content: "";
// ... 實(shí)現(xiàn) shape-outside 功能,代碼與上述保持一致
}
&::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(45deg, #f44336, #ff9800, #ffe607, #09d7c4, #1cbed3, #1d8ae2, #bc24d6);
z-index: 1;
mix-blend-mode: darken;
+ animation: change 10s infinite linear;
}
}
@keyframes change {
100% {
filter: hue-rotate(360deg);
}
}
這樣,我們就完美的實(shí)現(xiàn)了我們想要的效果:
當(dāng)然,有了這個(gè)基礎(chǔ)圖形之后,其實(shí)我們可以基于這個(gè)圖形,去做非常多有意思的效果。
下面我是嘗試的一些效果示意,譬如,我們可以將顏色放置在六邊形背景的下方,制作這樣一種效果:
配合 mask 的蒙版效果及鼠標(biāo)定位,我們還能實(shí)現(xiàn)這樣一種有趣的交互效果:
當(dāng)然,3D 效果也不在話下:
讀到這里,這篇“怎么使用CSS實(shí)現(xiàn)酷炫六邊形網(wǎng)格背景圖”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。