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

資訊專欄INFORMATION COLUMN

前端每日實戰:44# 視頻演示如何用純 CSS 創作背景色塊變換的按鈕特效

Shisui / 1268人閱讀

摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。

效果預覽

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

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

可交互視頻教程

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

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

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

源代碼下載

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

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

代碼解讀

定義 dom,標準導航結構下,

  • 中的每個字母用 包裹:

    居中顯示:

    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to right bottom, dimgray, black);
    }

    定義文字樣式:

    ul {
        padding: 0;
    }
    
    li {
        list-style-type: none;
    }
    
    li span {
        color: white;
        font-size: 50px;
        font-family: monospace;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    當鼠標懸停時,用偽元素繪制傾斜的背景色塊:

    li span {
        position: relative;
        transition: 500ms;
    }
    
    li:hover span {
        color: #333;
    }
    
    li span::before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0;
        z-index: -1;
        transition: 500ms;
    }
    
    li:hover span::before {
        width: 70%;
        transform: rotate(-25deg);
        background: white;
    }

    設置緩動延時,增加動畫效果:

    li:hover span {
        transition-delay: calc(80ms * var(--n) + 10ms);
    }
    
    li:hover span::before {
        transition-delay: calc(80ms * var(--n));
    }
    
    li span:nth-child(1) {
        --n: 1;
    }
    
    li span:nth-child(2) {
        --n: 2;
    }
    
    li span:nth-child(3) {
        --n: 3;
    }
    
    li span:nth-child(4) {
        --n: 4;
    }
    
    li span:nth-child(5) {
        --n: 5;
    }
    
    li span:nth-child(6) {
        --n: 6;
    }
    
    li span:nth-child(7) {
        --n: 7;
    }
    
    li span:nth-child(8) {
        --n: 8;
    }

    在單詞左側增加一條鼠標懸停時變亮的豎線:

    li {
        padding-left: 2em;
        border: 2px solid transparent;
        border-left-color: silver;
        transition: 500ms;
    }
    
    li:hover {
        border-left-color: white;
    }

    dom 中增加幾個按鈕,形成一組按鈕:

    最后,文字居中對齊,再調整一下按鈕間距:

    li {
        text-align: center;
        margin: 1em 0;
    }

    大功告成!

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

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

    相關文章

    • 前端每日實戰44# 視頻演示何用 CSS 創作背景色塊變換按鈕特效

      摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbbUlU?w=500&h=500); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comeh...

      Jenny_Tong 評論0 收藏0
    • 前端每日實戰 2018 年 6 月份項目匯總(共 27 個項目)

      摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一個表達懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 6 月份發布的項目 ...

      jokester 評論0 收藏0
    • 前端每日實戰 2018 年 6 月份項目匯總(共 27 個項目)

      摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一個表達懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 6 月份發布的項目 ...

      dingding199389 評論0 收藏0

    發表評論

    0條評論

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