CSS 奇思妙想 | Single Div 繪圖技巧

時間  2021-06-01
標籤 html 前端 git github 動畫 網站 spa code orm htm 欄目 CSS 简体版
原文   原文鏈接

常常能看到有關 CSS 繪圖的文章，譬如使用純 HTML + CSS 繪製一幅哆啦 A 夢圖畫。實現的方式就是經過堆疊 div，一步一步實現圖畫中的一塊一塊。這種技巧自己沒有什麼問題，可是就是少了一些難度，只須要有耐心，不少圖形仍是可以被慢慢實現出來的。html

基於 CSS 繪圖的這個需求，逐漸又有了新的一個流派，單標籤實現圖形，也就是說，一個複雜的圖形只借由一個標籤完成，這個相對於可以無限使用標籤，不斷堆疊 div 來講，無疑難度上升了不少，也要求對 CSS 有着更深入的理解。前端

譬以下面這個圖形，就是由一個 div 元素完成，源自於 A Single Div：git

image

本文就將介紹一些使用單標籤繪圖的技巧，而且使用這些技巧，借用單個標籤去實現一些複雜圖形~😅github

合理利用僞元素

雖說是一個標籤，可是幾乎全部打着單標籤實現圖形標題的例子，其中都使用了 3 個元素。這就是單標籤實現圖形上最爲核心的一部分：動畫

咱們除了元素自己的樣式可以控制以外，還有元素的兩個僞元素 -- ::before，::after，實際上一共是 3 個元素。網站

好，譬以下面這個心形圖形，只能使用一個 div 實現它，該怎麼作呢：spa

這種不規則的圖形自己使用純 CSS 是比較複雜的，一般會藉助 SVG，固然在 CSS 中就是使用 clip-path。不過仔細觀察圖形，咱們不須要 clip-path，嘗試將圖片分紅 3 部分：code

Wow，其實這裏，咱們只須要元素自己實現正方形，元素的兩個僞元素利用絕對定位實現兩個圓形，疊加在一塊兒便可！完整的代碼也很是簡單：orm

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 heartShapehtm

漸變 & 多重漸變

絕不誇張的說，漸變是在單標籤實現圖形中，使用的最多的一個 CSS 屬性。

緣由就在於咱們漸變是能夠多重漸變的！漸變不只僅只能是單個的 linear-gradient 或者單個的 radial-gradient，對於 background 而言，它是支持多重漸變的疊加的，一點很是重要。

好，咱們來看看這個太極圖：

其實太極圖就是由多個不一樣顏色的圓組成，這裏堆疊多個不一樣的 div，而且把他們組合在一塊兒確定是 OK 的。可是咱們的目標是使用單個標籤完成。

當圖形全是圓或者線條，就應該考慮使用多重線性（徑向）漸變了，咱們能夠將上圖拆解一下。

它實際上是由 1 個線性漸變加上 4 個徑向漸變生成的圓組成：

因此，一個太極圖完整的代碼只須要一個 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

陰影 & 多重陰影

與漸變很是相似的一個屬性就是陰影 box-shadow，box-shadow 屬性它的一個特色也是能夠疊加多層的，能夠內置多條陰影規則，它簡直就是單標籤繪圖的終極大殺器！

咱們嘗試使用一個 div 實現以下圖形：

乍一看，這個圖形其實仍是很複雜的，雲朵、雨滴都不像是僅僅用一個標籤或者一個僞元素可以實現的。

實則否則，首先咱們看看這個雲朵，雖然帶有不規則的輪廓，可是實際上就是一個一個的圓。很是適合使用多重徑向漸變或者是多重陰影！

其實就是一個實現圓，而後利用陰影實現多個圓的疊加，示例動畫，一看就懂：

代碼量其實也很是少，實現一個雲朵的代碼：

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

與雲朵的示例代碼相似，雨滴其實也是藉助了多重陰影實現：

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;
    }
    // 省略部分陰影位移幀動畫代碼
    ...
    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;
    }
}

剛剛已經使用了元素自己和元素的一個僞元素，剩餘一個僞元素實現底部的陰影圓便可，完整的 Demo 代碼你能夠戳這裏：A Signle Div Rainy

簡單總結一下

到這裏，能夠簡單總結一下，單標籤實現圖形，尤爲是複雜圖形，很大程度上都是藉助了上述的 3 個技巧，也就是：

  • 單標籤繪圖，實際上是使用元素自己和它的兩個僞元素 ::before 和 ::after
  • 合理使用多重漸變疊加
  • 合理使用多重陰影疊加

練習一下

咱們練習一下，使用單個 div 實現下面這個美隊盾牌：

有了上面的鋪墊，其實多重的圓形使用多重徑向漸變和多重陰影都是都是能夠的，而中間的星星，使用字符或者 clip-path 也能很是輕鬆的實現：

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;
}

咱們會獲得這樣一個圖形：

感受圖形少了一些光澤，咱們能夠往 div 上繼續疊加一些 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，便能完美的實現：

完整的代碼你能夠戳這裏：A Signle Div Shield

單個標籤實現一個磁帶

咱們再看看這個圖形，一個磁帶圖形：

看着很複雜，其實都是圓和各類線條，其實也是適合使用單個標籤實現的，就是很是的花時間，須要精細的控制 background-image 裏面的每一個漸變的 background-size、background-position：

首先，藉由多重漸變，實現整個背景結構：

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%);
}

獲得以下圖形：

經過其中一個僞元素，利用 box-shadow 實現磁帶上的各個圓圈點：

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;
}

最後剩下的一個僞元素，實現磁帶中間的部分樣式便可：

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;
}

這樣，就順利使用單個標籤實現啦，該 Demo 取自 A Single Div，完整的代碼你能夠戳這裏：CodePen Demo -- A single Div Disk。

固然，單標籤能實現的遠不止如此，看看下面這些，都是一個 div 可以實現的：

配合其它高階屬性

固然，上述的做圖都仍是比較常規的，藉助僞元素，使用 background、使用 box-shadow。咱們還能夠嘗試在一個 div 內增長混合模式 mix-blend-mode、濾鏡 filter 以及 遮罩 mask 等，實現一些更爲有意思的效果。

譬以下述這個效果，使用了一個 div 實現的幽靈效果：

在用一個 div 實現基本效果之餘，還加上了利用了 filter 濾鏡實現了一些融合效果。

完整的代碼你能夠戳這裏：CodePen Demo -- A Single Div Ghost

最後

只使用 CSS 進行單 div 繪圖仍是很是有意思的，也能夠比較好的鍛鍊 CSS，雖然業務中不必定會用上 ：)

這裏再推薦幾個單標籤繪圖的網站，你能夠看看再模仿模仿：

好了，本文到此結束，但願對你有幫助 :)

想 Get 到最有意思的 CSS 資訊，千萬不要錯過個人公衆號 -- iCSS前端趣聞 😄

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程