「HTML+CSS」--自定義按鈕樣式【004】

海轟Pro發表於2021-04-01
HTMLCSS

前言

Hello！小夥伴！
首先非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～
哈哈 自我介紹一下
暱稱：海轟
標籤：程式猿一隻｜C++選手｜學生
簡介：因C語言結識程式設計，隨後轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C++/Linux（真的真的太難了～）
學習經驗：紮實基礎 + 多做筆記 + 多敲程式碼 + 多思考 + 學好英語！
日常分享：微信公眾號【海轟Pro】記錄生活、學習點滴，分享一些原始碼或者學習資料，歡迎關注～

效果展示

在這裡插入圖片描述
在這裡插入圖片描述

思路

上面效果可以概括為：

  • 滑鼠未停留時：button背景與body保持一致（以黑色為例），文字為藍色，同時button四周一條藍色的線條一直圍繞button旋轉
  • 滑鼠停留時：button按鈕背景變為藍色，其中文字變為黑色，同時產生陰影、倒影

根據效果圖可以得出實現的一些思路：

  • 背景顏色的變化使用hover就可以實現
  • 難點在於四周的線條
  • 這裡海轟的解決辦法是分為上下左右四條線，賦予每一條線一個動畫，通過延時達到類似一條線的效果

這裡使用的藍色：

  • 藍色：#03e9f4

Demo程式碼

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <button class="btn">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Haihong Pro
    </button>
</body>
</html>

CSS

html,body{
    margin: 0;
    height: 100%;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
}
.btn{
    width: 300px;
    height: 120px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 36px;
    color: #03e9f4;
    /* 字元間的距離 */
    letter-spacing: 2px;
    background: transparent;
    border: none;
    position: relative;
    overflow: hidden;
    transition: 0.5s;
}
.btn:hover{
    background: #03e9f4;
    color: black;
    box-shadow: 0 0 5px #03e9f4,
    0 0 25px #03e9f4,
    0 0 50px #03e9f4,
    0 0 200px #03e9f4;
    /* 倒影 */
-webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.btn span{
    position: absolute;
    content: '';
}
.btn span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    animation: animate1 1s linear infinite;
    background: linear-gradient(90deg,transparent,#03e9f4);
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}

.btn span:nth-child(2){
    top: -100%;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#03e9f4);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}

.btn span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(270deg,transparent,#03e9f4);
    animation: animate3 1s linear infinite;
    animation-delay: 0.55s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}

.btn span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#03e9f4);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}

原理解釋

這裡還是主要講講四周線條的動畫效果吧

四條線條的初始位置如下：
在這裡插入圖片描述

注：

  • 這裡將顏色改為紅色，線條寬度為20px，便於觀察
  • 這裡說的初始位置是指動畫開始時的初始位置

以一條線條（第一條）的動畫為例

其css設定為：絕對定位 position:absolute top=0 left=0

初始位置如圖：
在這裡插入圖片描述

第一條線條動畫需要實現的效果

  • 線條頭部從button最左端開始移動
  • 平行向右移動
  • 最終停下位置為：線條尾部到達button最右端

最初位置：
起始位置
最終位置：
最後位置
根據上述思路，編寫動畫程式碼

.btn span:nth-child(1){
    top: 0;
    left: 100%;
    width: 100%;
    height: 20px;
    animation: animate1 1s linear infinite; 
    background: linear-gradient(90deg,transparent,red);
}
// 動畫：從左到右 
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }

效果如下：

在這裡插入圖片描述
我們的需求是：線條只需要在button區域進行動畫，其他區域使用者不可見

解決辦法也很簡單：button中設定：overflow: hidden;

效果如下：
在這裡插入圖片描述

同理，再分別對其他三條邊進行設定就可以了

第二條線效果：

在這裡插入圖片描述
第三條線效果：

在這裡插入圖片描述

第四條線條效果：

在這裡插入圖片描述

疑點詳解

疑點1

估計細心的小夥伴會注意到

  • 動畫animate1延遲為0
  • 動畫animate2延遲為0.25s
  • 動畫animate3延遲為0.5s
  • 動畫animate4延遲為0.75s

為什麼會這樣設定呢？

emmm 這裡就說說海轟自己的理解吧

首先，我們將每一個動畫的時間都位置為了 1s

為了達到連貫的效果，也就是：

  • 線條1頭部到達button最右端時，線條2頭部恰好從button最上端向下開始移動
  • 線條2頭部到達button最下端時，線條3頭部恰好從button最右端向左開始移動
  • 線條3頭部到達button最左端時，線條4頭部恰好從button最下端開始向上移動
  • 線條4頭部到達button最上端時，線條1頭部恰好從button最左端開始向右移動
  • 依次迴圈

在這裡插入圖片描述
從上述的效果描述中，我們可以得知，從線條4頭部到達最上端時，線條1恰好又進行第二次動畫

也就是每次動畫間隔了1s

每條線執行的時間又相同，所以在button上移動的時間也是相同的

均為 1s/4=0.25s

也就是說：線條1頭部從button最左端到最右端，耗時0.25s

簡單的理解：

每隔1s線條1就要出發一次
為了得到連貫效果，必須要求1s之內，其他3條線都跑完button三條邊
而跑完每一條邊需要的時間又是一樣的（這個是通過ambition設定的）
從而得出 每一條邊需要 1s/4 = 0.25s

此時，線條2才開始動畫，也就需要延時0.25s

同理，線條3、4 的延時也就累計就可以了

疑點2

為什麼動畫設定是0%-50%呢

@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}

從疑點1的解答中，我們可以發現，每條線在button邊執行的時間只能為0.25s

線條從開始到結束，需要耗時 1s（也就是從0%-100%）

/* 假設這樣設定 */
@keyframes animate1{
    0%{
        left: -100%;
    }
    100%{
        left: 100%;
    }
}

在這裡插入圖片描述

因為移動速度為勻速（動畫屬性設定了）

所以到50%需要耗時0.5s

也就是說：線條1執行在button上的時間為：0.5s

這與我們需要的0.25s就有區別

那麼需要怎麼辦呢？

哈哈，這裡我們將動畫屬性修改一下：

@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}

啥意思呢？

簡單理解就是隻用了一半的時間（0.5s）就從開始狀態執行到了最終狀態（0%-100%）

那麼從0%-50%就只需要0.25s了

注：這裡海轟說的估計不是很好理解，但是自己心裡知道咋回事，不太會描述，不懂的小夥伴可以查查ambition的介紹

符合要求！

結語

學習來源：

https://codepen.io/bhadupranjal/pen/vYLZYqQ

css只會一點點，學習之餘從喜歡看一些大神級別的css效果展示，根據原始碼一點一點學習知識點，文中有不對的地方，歡迎指出～

在這裡插入圖片描述

相關文章