国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端每日實戰 167# 視頻演示如何用 1 個 dom 元素創作兩顆愛心

mingde / 1273人閱讀

摘要:每一個陰影屬性值就可以繪制出一個圓點,因為可以接收多個屬性性,所以就可以用多個圓點來畫點陣圖了。

效果預覽

按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。

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

可交互視頻

此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。

請用 chrome, safari, edge 打開觀看。

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

源代碼下載

每日前端實戰系列的全部源代碼請從 github 下載:

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

代碼解讀 一、繪制一個圓點

定義 dom 結構,只有一個 dom 元素,名為 .heart

讓元素居中顯示,設置頁面背景色為淺粉紅漸變色:

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

畫出一個紅色圓點:

.heart {
    font-size: 30px;
    width: 1em;
    height: 1em;
    background-color: red;
    border-radius: 50%;
二、制作一個點陣圖形和它的投影

我們要制作一個點陣圖形,這個手法在第 67 號作品中曾有應用。原理是利用 box-shadow 的特性,如果你已經了解了這個手法,可以直接滾屏到下一節,如果還不了解,做下面這幾個小實驗就明白了。

.heart 設置下面的陰影,則在紅色圓點的右側會出現一個等大的黑點:

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

繼續在紅點左側畫一個黑點:

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

再繼續,在紅點的下方畫一個黑點:

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

再在紅點的上方畫一個黑點:

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

現在你可以看到,4 個黑點組成一個十字形,而紅點在這個十字形交叉點的位置。這個技巧就是把屏幕當作一個以紅點為原點的平面坐標系,水平方向右側為正,垂直方向下方為正,與瀏覽器的坐標體系一致。每一個陰影屬性值就可以繪制出一個圓點,因為 box-shadow 可以接收多個屬性性,所以就可以用多個圓點來畫點陣圖了。

為了讓代碼更直觀,我們可以把代碼的布局安排得和圖案的形狀一樣,下面 box-shadow 的 4 個屬性值用來畫出一個十字形:

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




        -1.1em 0,               1.1em 0,




                    0 1.1em;
}

因為沒有給陰影指定顏色,所以它默認是黑色,要把它改成紅色,并不需要在 box-shadow 賦值,基于 CSS 的繼承原理,直接給元素指定一個顏色,陰影就采用相同的顏色了:

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

大紅太艷了,讓它的顏色談一點:

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

接下來再用一個技巧,用 drop-shadow() 把整個圖案再復制出一份:

.heart {
    filter: drop-shadow(3.3em 2.2em dodgerblue);
}
三、繪制心形圖案

有了上面的知識儲備,繪制心形就只是一個工夫活了,花一點時間在紙上畫一畫,數一數,就可以創作點陣圖形了。這里用到的心形是 9 * 8 點陣的:

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

哈哈,這一大片代碼真是讓人頭暈啊,但是如果是在編輯器里看,它就是一個心形呢,像下面這樣,這就是傳說中的所見即所得吧:

至此,我們得到了一顆紅心和一顆藍心。

四、設計動畫效果

定義 2 組關鍵幀,分別用于紅心和藍心,紅心的幀效果就是 box-shadow 屬性的代碼,藍心的幀效果則是 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);
    }
}

最后,定義動畫屬性,注意藍心有 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);
}

大功告成!

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53898.html

相關文章

  • 前端每日實戰 167# 視頻演示何用 1 dom 元素創作兩顆愛心

    摘要:每一個陰影屬性值就可以繪制出一個圓點,因為可以接收多個屬性性,所以就可以用多個圓點來畫點陣圖了。 showImg(https://segmentfault.com/img/bVbsSVm?w=400&h=348); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehope/pen/KLvENb 可交互視頻 此視頻...

    LdhAndroid 評論0 收藏0
  • 前端每日實戰 2018年10月至2019年6月項目匯總(共 20 項目)

    摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月至年月發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀, 過往項目 2018 年 9 月份項目匯總(共 26 個項目) 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(...

    muddyway 評論0 收藏0
  • 前端每日實戰 2018 年 5 月份項目匯總(共 30 項目)

    摘要:過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目,用視頻記錄...

    array_huang 評論0 收藏0

發表評論

0條評論

mingde

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<