亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端每日實(shí)戰(zhàn)：3# 視頻演示如何用純 CSS 創(chuàng)作一個容器厚條紋邊框特效

iliyaku / 1678人閱讀

摘要：代碼解讀定義一個名為的容器內(nèi)容居中顯示畫條紋背景在容器內(nèi)定義一個名為的容器容器留出厚邊框，容器嵌在其中設(shè)置厚邊框的立體效果容器中增加內(nèi)容內(nèi)容布局定義動畫效果最后，把動畫效果應(yīng)用到容器上大功告成知識點(diǎn)

效果預(yù)覽

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

https://codepen.io/zhang-ou/pen/YLqbXy

可交互視頻教程

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

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

https://scrimba.com/c/cPvn6tE

源代碼下載

請從 github 下載。

https://github.com/comehope/front-end-daily-challenges/tree/master/003-diagonal-stripe-border-effects

代碼解讀

定義一個名為 box 的容器：

內(nèi)容居中顯示：

html,
body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

畫條紋背景：

.box {
    width: 300px;
    height: 300px;
    background: linear-gradient(
        -45deg,
        white 0%,
        white 25%,
        hotpink 25%,
        hotpink 50%,
        white 50%,
        white 75%,
        hotpink 75%,
        hotpink 100%);
    background-size: 10%;
}

在 box 容器內(nèi)定義一個名為 content 的容器：

box 容器留出厚邊框，content 容器嵌在其中：

.box .content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    box-sizing: border-box;
    padding: 15px;
}

.box .content {
    background-color: white;
}

設(shè)置厚邊框的立體效果：

.box,
.box .content {
    box-shadow: 0 0 2px deeppink,
                0 0 5px rgba(0, 0, 0, 1),
                inset 0 0 5px rgba(0, 0, 0, 1);
    border-radius: 10px;
}

content 容器中增加內(nèi)容：


    

        
What is Lorem Ipsum?

        
Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risus sed, congue congue quam. Morbi sit amet suscipit ex. Vivamus vel nulla ac libero volutpat ultrices.

內(nèi)容布局：

.box .content {
    flex-direction: column;
    box-sizing: border-box;
    padding: 30px;
    text-align: center;
    font-family: sans-serif;
}

.box .content h2 {
    color: deeppink;
}

.box .content p {
    color: dimgray;
}

定義動畫效果：

@keyframes animate {
    from {
        background-position: 0;
    }

    to {
        background-position: 10%;
    }
}

最后，把動畫效果應(yīng)用到 box 容器上：

.box {
    animation: animate 2s linear infinite;
}

大功告成！

知識點(diǎn)

linear-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

box-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

@keyframes https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

background-position https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

lorem ipsum https://lipsum.com/

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/52243.html

相關(guān)文章

  • 前端每日實(shí)戰(zhàn)：3# 視頻演示如何用純 CSS 創(chuàng)作一個容器厚條紋邊框特效

    摘要：代碼解讀定義一個名為的容器內(nèi)容居中顯示畫條紋背景在容器內(nèi)定義一個名為的容器容器留出厚邊框，容器嵌在其中設(shè)置厚邊框的立體效果容器中增加內(nèi)容內(nèi)容布局定義動畫效果最后，把動畫效果應(yīng)用到容器上大功告成知識點(diǎn) showImg(https://segmentfault.com/img/bVbcWRf?w=500&h=500); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接全屏預(yù)覽。 h...

    dockerclub 評論0 收藏0

  • 前端每日實(shí)戰(zhàn)專欄 2018 年 4 月份項目匯總（共 8 個項目）

    摘要：前端每日實(shí)戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書以下是年月份發(fā)布的項目視頻演示如何用純創(chuàng)作一個按鈕文字滑動特效視頻演示如何用純創(chuàng)作一個矩形旋轉(zhuǎn)特效視頻演示如何用純創(chuàng)作一個容器厚條紋邊 《前端每日實(shí)戰(zhàn)》專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書！ 以下是 2018 年 4 月份發(fā)...

    draveness 評論0 收藏0

  • 前端每日實(shí)戰(zhàn)專欄 2018 年 4 月份項目匯總（共 8 個項目）

    摘要：前端每日實(shí)戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書以下是年月份發(fā)布的項目視頻演示如何用純創(chuàng)作一個按鈕文字滑動特效視頻演示如何用純創(chuàng)作一個矩形旋轉(zhuǎn)特效視頻演示如何用純創(chuàng)作一個容器厚條紋邊 《前端每日實(shí)戰(zhàn)》專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書！ 以下是 2018 年 4 月份發(fā)...

    legendmohe 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<