摘要：每一個(gè)陰影屬性值就可以繪制出一個(gè)圓點(diǎn)，因?yàn)榭梢越邮斩鄠€(gè)屬性性，所以就可以用多個(gè)圓點(diǎn)來(lái)畫(huà)點(diǎn)陣圖了。

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

https://codepen.io/comehope/pen/KLvENb

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開(kāi)觀看。

https://scrimba.com/p/pEgDAM/cJ8vrMt2

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：

https://github.com/comehope/front-end-daily-challenges

定義 dom 結(jié)構(gòu)，只有一個(gè) dom 元素，名為 .heart：

讓元素居中顯示，設(shè)置頁(yè)面背景色為淺粉紅漸變色：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(lightpink, white);
}

畫(huà)出一個(gè)紅色圓點(diǎn)：

.heart {
    font-size: 30px;
    width: 1em;
    height: 1em;
    background-color: red;
    border-radius: 50%;

我們要制作一個(gè)點(diǎn)陣圖形，這個(gè)手法在第 67 號(hào)作品中曾有應(yīng)用。原理是利用 box-shadow 的特性，如果你已經(jīng)了解了這個(gè)手法，可以直接滾屏到下一節(jié)，如果還不了解，做下面這幾個(gè)小實(shí)驗(yàn)就明白了。

給 .heart 設(shè)置下面的陰影，則在紅色圓點(diǎn)的右側(cè)會(huì)出現(xiàn)一個(gè)等大的黑點(diǎn)：

.heart {
    box-shadow:
        1.1em 0;
}

繼續(xù)在紅點(diǎn)左側(cè)畫(huà)一個(gè)黑點(diǎn)：

.heart {
    box-shadow:
        1.1em 0,
        -1.1em 0;
}

再繼續(xù)，在紅點(diǎn)的下方畫(huà)一個(gè)黑點(diǎn)：

.heart {
    box-shadow:
        1.1em 0,
        -1.1em 0,
        0 1.1em;
}

再在紅點(diǎn)的上方畫(huà)一個(gè)黑點(diǎn)：

.heart {
    box-shadow:
        1.1em 0,
        -1.1em 0,
        0 1.1em,
        0 -1.1em;
}

現(xiàn)在你可以看到，4 個(gè)黑點(diǎn)組成一個(gè)十字形，而紅點(diǎn)在這個(gè)十字形交叉點(diǎn)的位置。這個(gè)技巧就是把屏幕當(dāng)作一個(gè)以紅點(diǎn)為原點(diǎn)的平面坐標(biāo)系，水平方向右側(cè)為正，垂直方向下方為正，與瀏覽器的坐標(biāo)體系一致。每一個(gè)陰影屬性值就可以繪制出一個(gè)圓點(diǎn)，因?yàn)?box-shadow 可以接收多個(gè)屬性性，所以就可以用多個(gè)圓點(diǎn)來(lái)畫(huà)點(diǎn)陣圖了。

為了讓代碼更直觀，我們可以把代碼的布局安排得和圖案的形狀一樣，下面 box-shadow 的 4 個(gè)屬性值用來(lái)畫(huà)出一個(gè)十字形：

.heart {
    box-shadow: 
                    0 -1.1em,




        -1.1em 0,               1.1em 0,




                    0 1.1em;
}

因?yàn)闆](méi)有給陰影指定顏色，所以它默認(rèn)是黑色，要把它改成紅色，并不需要在 box-shadow 賦值，基于 CSS 的繼承原理，直接給元素指定一個(gè)顏色，陰影就采用相同的顏色了：

.heart {
    color: red;
    background-color: currentColor;
}

大紅太艷了，讓它的顏色談一點(diǎn)：

.heart {
    color: hsla(0, 100%, 50%, 0.6);
}

接下來(lái)再用一個(gè)技巧，用 drop-shadow() 把整個(gè)圖案再?gòu)?fù)制出一份：

.heart {
    filter: drop-shadow(3.3em 2.2em dodgerblue);
}

有了上面的知識(shí)儲(chǔ)備，繪制心形就只是一個(gè)工夫活了，花一點(diǎn)時(shí)間在紙上畫(huà)一畫(huà)，數(shù)一數(shù)，就可以創(chuàng)作點(diǎn)陣圖形了。這里用到的心形是 9 * 8 點(diǎn)陣的：

.heart {
    --heart-shape: 
                    -3.3em -3.3em, -2.2em -3.3em,                                          2.2em -3.3em, 3.3em -3.3em,




    -4.4em -2.2em, -3.3em -2.2em, -2.2em -2.2em, -1.1em -2.2em,             1.1em -2.2em, 2.2em -2.2em, 3.3em -2.2em, 4.4em -2.2em,




    -4.4em -1.1em, -3.3em -1.1em, -2.2em -1.1em, -1.1em -1.1em, 0em -1.1em, 1.1em -1.1em, 2.2em -1.1em, 3.3em -1.1em, 4.4em -1.1em,



    
    -4.4em 0em,    -3.3em 0em,    -2.2em 0em,    -1.1em 0em,    0em 0em,    1.1em 0em,    2.2em 0em,    3.3em 0em,    4.4em 0em,



    
                    -3.3em 1.1em,  -2.2em 1.1em,  -1.1em 1.1em,  0em 1.1em,  1.1em 1.1em,  2.2em 1.1em,  3.3em 1.1em,




                                    -2.2em 2.2em,  -1.1em 2.2em,  0em 2.2em,  1.1em 2.2em,  2.2em 2.2em,




                                                    -1.1em 3.3em,  0em 3.3em,  1.1em 3.3em,




                                                                0em 4.4em;
    box-shadow: var(--heart-shape);
}

哈哈，這一大片代碼真是讓人頭暈啊，但是如果是在編輯器里看，它就是一個(gè)心形呢，像下面這樣，這就是傳說(shuō)中的所見(jiàn)即所得吧：

至此，我們得到了一顆紅心和一顆藍(lán)心。

定義 2 組關(guān)鍵幀，分別用于紅心和藍(lán)心，紅心的幀效果就是 box-shadow 屬性的代碼，藍(lán)心的幀效果則是 drop-shadow() 的代碼：

.heart {
    /* box-shadow: var(--heart-shape); */
    /* color: hsla(0, 100%, 50%, 0.6); */
    /* filter: drop-shadow(3.3em 2.2em dodgerblue); */
}

@keyframes heart-one {
    to {
        box-shadow: var(--heart-shape);
        color: hsla(0, 100%, 50%, 0.6);
    }
}

@keyframes heart-two {
    to {
        filter: drop-shadow(3.3em 2.2em dodgerblue);
    }
}

最后，定義動(dòng)畫(huà)屬性，注意藍(lán)心有 0.3s 的延遲：

.heart {
    animation: 
        heart-one 1s infinite alternate cubic-bezier(0.5, 1.7, 0.5, 1.5),
        heart-two 1s 0.3s infinite alternate cubic-bezier(0.5, 1.7, 0.25, 1);
}

大功告成！