經(jīng)常能看到有關(guān) CSS 繪圖的文章，譬如使用純 HTML + CSS 繪制一幅哆啦 A 夢(mèng)圖畫。實(shí)現(xiàn)的方式就是通過堆疊 div，一步一步實(shí)現(xiàn)圖畫中的一塊一塊。這種技巧本身沒有什么問題，但是就是少了一些難度，只需要有耐心，很多圖形還是能夠被慢慢實(shí)現(xiàn)出來的。
基于 CSS 繪圖的這個(gè)需求，逐漸又有了新的一個(gè)流派，單標(biāo)簽實(shí)現(xiàn)圖形，也就是說，一個(gè)復(fù)雜的圖形只借由一個(gè)標(biāo)簽完成，這個(gè)相對(duì)于能夠無限使用標(biāo)簽，不斷堆疊 div 來說，無疑難度上升了很多，也要求對(duì) CSS 有著更深刻的理解。
譬如下面這個(gè)圖形，就是由一個(gè) div 元素完成，源自于 A Single Div：
本文就將介紹一些使用單標(biāo)簽繪圖的技巧，并且使用這些技巧，借用單個(gè)標(biāo)簽去實(shí)現(xiàn)一些復(fù)雜圖形~😅
合理利用偽元素
雖然說是一個(gè)標(biāo)簽，但是幾乎所有打著單標(biāo)簽實(shí)現(xiàn)圖形標(biāo)題的例子，其中都使用了 3 個(gè)元素。這就是單標(biāo)簽實(shí)現(xiàn)圖形上最為核心的一部分：
我們除了元素本身的樣式能夠控制之外，還有元素的兩個(gè)偽元素 -- ::before，::after，實(shí)際上一共是 3 個(gè)元素。
好，譬如下面這個(gè)心形圖形，只能使用一個(gè) div 實(shí)現(xiàn)它，該怎么做呢：
這種不規(guī)則的圖形本身使用純 CSS 是比較復(fù)雜的，通常會(huì)借助 SVG，當(dāng)然在 CSS 中就是使用 clip-path。不過仔細(xì)觀察圖形，我們不需要 clip-path，嘗試將圖片分成 3 部分：
Wow，其實(shí)這里，我們只需要元素本身實(shí)現(xiàn)正方形，元素的兩個(gè)偽元素利用絕對(duì)定位實(shí)現(xiàn)兩個(gè)圓形，疊加在一起即可！完整的代碼也非常簡(jiǎn)單：
div {
position: relative;
transform: rotate(45deg);
background: rgba(255, 20, 147, 0.85);
width: 140px;
height: 140px;
}
div::before,
div::after {
content: "";
position: absolute;
top: 0;
left: -70px;
width: 140px;
height: 140px;
border-radius: 50%;
background: rgb(255, 20, 147);
}
div::before {
top: -70px;
left: 0;
}
完整的示例代碼，你可以戳這里 CodePen Demo -- A Signle Div heartShape
漸變 & 多重漸變
毫不夸張的說，漸變是在單標(biāo)簽實(shí)現(xiàn)圖形中，使用的最多的一個(gè) CSS 屬性。
原因就在于我們漸變是可以多重漸變的！漸變不僅僅只能是單個(gè)的 linear-gradient 或者單個(gè)的 radial-gradient，對(duì)于 background 而言，它是支持多重漸變的疊加的，一點(diǎn)非常重要。
好，我們來看看這個(gè)太極圖：
其實(shí)太極圖就是由多個(gè)不同顏色的圓組成，這里堆疊多個(gè)不同的 div，并且把他們組合在一起肯定是 OK 的。但是我們的目標(biāo)是使用單個(gè)標(biāo)簽完成。
當(dāng)圖形全是圓或者線條，就應(yīng)該考慮使用多重線性（徑向）漸變了，我們可以將上圖拆解一下。
它其實(shí)是由 1 個(gè)線性漸變加上 4 個(gè)徑向漸變生成的圓組成：
所以，一個(gè)太極圖完整的代碼只需要一個(gè) div 即可，甚至都不需要偽元素的輔助：
div {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: radial-gradient(#000 12.5px, transparent 12.5px),
radial-gradient(#fff 12.5px, transparent 12.5px),
radial-gradient(#fff 50px, transparent 50px),
radial-gradient(#000 50px, transparent 50px),
linear-gradient(90deg, #000 100px, #fff 100px);
background-position: center 50px, center -50px, center 50px, center -50px, 0 0;
}
完整的示例代碼，你可以戳這里 CodePen Demo -- A Single Div PURE CSS Tai Chi
陰影 & 多重陰影
與漸變非常類似的一個(gè)屬性就是陰影 box-shadow，box-shadow 屬性它的一個(gè)特點(diǎn)也是可以疊加多層的，可以內(nèi)置多條陰影規(guī)則，它簡(jiǎn)直就是單標(biāo)簽繪圖的終極大殺器！
我們嘗試使用一個(gè) div 實(shí)現(xiàn)如下圖形：
乍一看，這個(gè)圖形其實(shí)還是很復(fù)雜的，云朵、雨滴都不像是僅僅用一個(gè)標(biāo)簽或者一個(gè)偽元素能夠?qū)崿F(xiàn)的。
實(shí)則不然，首先我們看看這個(gè)云朵，雖然帶有不規(guī)則的輪廓，但是實(shí)際上就是一個(gè)一個(gè)的圓。非常適合使用多重徑向漸變或者是多重陰影！
其實(shí)就是一個(gè)實(shí)現(xiàn)圓，然后利用陰影實(shí)現(xiàn)多個(gè)圓的疊加，示例動(dòng)畫，一看就懂：
代碼量其實(shí)也非常少，實(shí)現(xiàn)一個(gè)云朵的代碼：
div{
width:100px;
height:100px;
background:#fff;
border-radius:50%;
box-shadow:
120px 0px 0 -10px #fff,
95px 20px 0 0px #fff,
30px 30px 0 -10px #fff,
90px -20px 0 0px #fff,
40px -40px 0 0px #fff;
}
CodePen Demo -- A Single Div Cloudy
與云朵的示例代碼類似，雨滴其實(shí)也是借助了多重陰影實(shí)現(xiàn)：
div {
position: absolute;
width: 3px;
height: 6px;
border-radius: 50%;
animation: rainy_rain 0.7s infinite linear;
box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,
rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
}
@keyframes rainy_rain {
0% {
box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,
rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
}
// 省略部分陰影位移幀動(dòng)畫代碼
...
100% {
box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px,
rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
}
}
剛剛已經(jīng)使用了元素本身和元素的一個(gè)偽元素，剩余一個(gè)偽元素實(shí)現(xiàn)底部的陰影圓即可，完整的 Demo 代碼你可以戳這里：A Signle Div Rainy
簡(jiǎn)單總結(jié)一下
到這里，可以簡(jiǎn)單總結(jié)一下，單標(biāo)簽實(shí)現(xiàn)圖形，尤其是復(fù)雜圖形，很大程度上都是借助了上述的 3 個(gè)技巧，也就是：
- 單標(biāo)簽繪圖，其實(shí)是使用元素本身和它的兩個(gè)偽元素
::before 和 ::after
- 合理使用多重漸變疊加
- 合理使用多重陰影疊加
練習(xí)一下
我們練習(xí)一下，使用單個(gè) div 實(shí)現(xiàn)下面這個(gè)美隊(duì)盾牌：
有了上面的鋪墊，其實(shí)多重的圓形使用多重徑向漸變和多重陰影都是都是可以的，而中間的星星，使用字符或者 clip-path 也能非常輕松的實(shí)現(xiàn)：
div {
position: absolute;
width: 200px;
height: 200px;
background:
radial-gradient(
at center,
#0033b0 20%,
#ce0021 20%,
#ce0021 35%,
#eee 35%,
#eee 55%,
#ce0021 55%
);
border-radius: 50%;
}
div::before {
content: "★";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 47px;
font-size: 55px;
}
我們會(huì)得到這樣一個(gè)圖形：
感覺圖形少了一些光澤，我們可以往 div 上繼續(xù)疊加一些 linear-gradient，給盾牌表面添加一些高光：
div {
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(45deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 65%),
linear-gradient(-45deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 65%),
linear-gradient(to right, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 65%),
linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 65%),
radial-gradient(
ellipse at center,
#0033b0 20%,
#ce0021 20%,
#ce0021 35%,
#eee 35%,
#eee 55%,
#ce0021 55%
);
border-radius: 50%;
}
div::before {
content: "★";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 47px;
font-size: 55px;
}
OK，便能完美的實(shí)現(xiàn)：
完整的代碼你可以戳這里：A Signle Div Shield
單個(gè)標(biāo)簽實(shí)現(xiàn)一個(gè)磁帶
我們?cè)倏纯催@個(gè)圖形，一個(gè)磁帶圖形：
看著很復(fù)雜，其實(shí)都是圓和各種線條，其實(shí)也是適合使用單個(gè)標(biāo)簽實(shí)現(xiàn)的，就是非常的花時(shí)間，需要精細(xì)的控制 background-image 里面的每個(gè)漸變的 background-size、background-position：
首先，借由多重漸變，實(shí)現(xiàn)整個(gè)背景結(jié)構(gòu)：
div {
width: 180px;
height: 120px;
border-radius: 5px;
background-image: linear-gradient(to right, #444 10px, transparent 10px),
linear-gradient(to left, #444 10px, transparent 10px),
linear-gradient(135deg, #444 20px, transparent 20px),
linear-gradient(-135deg, #444 20px, transparent 20px),
linear-gradient(
to bottom,
transparent 35px,
#be0974 35px,
#be0974 43px,
#da6a57 43px,
#da6a57 51px,
#eebc31 51px,
#eebc31 59px,
#92a25b 59px,
#92a25b 67px,
#46a7c0 67px,
#46a7c0 75px,
transparent 75px
),
linear-gradient(
to bottom,
transparent 10px,
#f7f7f7 10px,
#f7f7f7 85px,
transparent 85px
),
linear-gradient(to top, transparent 26px, #444 26px),
linear-gradient(
105deg,
#444 70px,
#333 70px,
#333 73px,
transparent 73px
),
linear-gradient(
-105deg,
#444 70px,
#333 70px,
#333 73px,
transparent 73px
),
linear-gradient(to top, #444 24px, #777 24px, #777 26px, #444 26px);
box-shadow: -4px -4px 2px rgb(0 0 0 / 20%);
}
得到如下圖形：
通過其中一個(gè)偽元素，利用 box-shadow 實(shí)現(xiàn)磁帶上的各個(gè)圓圈點(diǎn)：
div:after {
position: absolute;
content: "";
width: 5px;
height: 5px;
background: #999;
border-radius: 50%;
box-shadow: 165px 0 0 #999, 0 104px 0 #999, 165px 104px 0 #999, 55px 101px 0 1px #222, 68px 98px 0 1px #222, 98px 98px 0 1px #222, 110px 101px 0 1px #222, 51px 38px 0 #444, 114px 38px 0 #444, 44px 46px 0 #444, 58px 46px 0 #444, 107px 46px 0 #444, 121px 46px 0 #444, 51px 53px 0 #444, 114px 53px 0 #444, 51px 46px 0 6px #ccc, 114px 46px 0 6px #ccc;
left: 5px;
top: 5px;
}
最后剩下的一個(gè)偽元素，實(shí)現(xiàn)磁帶中間的部分樣式即可：
div:before {
position: absolute;
content: "";
width: 90px;
height: 26px;
margin-left: -45px;
left: 50%;
top: 41px;
background-color: #ccc;
background-image: linear-gradient(to bottom, #444 5px, transparent 5px),
linear-gradient(to top, #444 5px, transparent 5px),
linear-gradient(to right, #444 30px, transparent 30px),
linear-gradient(to left, #444 30px, transparent 30px),
radial-gradient(circle at 10px 12px, #a0522d 32px, transparent 32px);
border-radius: 30px;
}
這樣，就順利使用單個(gè)標(biāo)簽實(shí)現(xiàn)啦，該 Demo 取自 A Single Div，完整的代碼你可以戳這里：CodePen Demo -- A single Div Disk。
當(dāng)然，單標(biāo)簽?zāi)軐?shí)現(xiàn)的遠(yuǎn)不止如此，看看下面這些，都是一個(gè) div 能夠?qū)崿F(xiàn)的：
配合其它高階屬性
當(dāng)然，上述的作圖都還是比較常規(guī)的，借助偽元素，使用 background、使用 box-shadow。我們還可以嘗試在一個(gè) div 內(nèi)增加混合模式 mix-blend-mode、濾鏡 filter 以及 遮罩 mask 等，實(shí)現(xiàn)一些更為有意思的效果。
譬如下述這個(gè)效果，使用了一個(gè) div 實(shí)現(xiàn)的幽靈效果：
在用一個(gè) div 實(shí)現(xiàn)基本效果之余，還加上了利用了 filter 濾鏡實(shí)現(xiàn)了一些融合效果。
完整的代碼你可以戳這里：CodePen Demo -- A Single Div Ghost
最后
只使用 CSS 進(jìn)行單 div 繪圖還是非常有意思的，也可以比較好的鍛煉 CSS，雖然業(yè)務(wù)中不一定會(huì)用上 ：)
這里再推薦幾個(gè)單標(biāo)簽繪圖的網(wǎng)站，你可以看看再模仿模仿：
- A Single Div
- MagicCSS
- CodePen - Single Div
好了，本文到此結(jié)束，希望對(duì)你有幫助 😃
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。
以上就是CSS中Single Div 繪圖技巧的實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于css single div單標(biāo)簽繪圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
