「HTML+CSS」--自定義按鈕樣式【004】
Part1效果展示
Part2思路
上面效果可以概括為：
鼠標(biāo)未停留時(shí)：button背景與body保持一致（以黑色為例），文字為藍(lán)色，同時(shí)button四周一條藍(lán)色的線條一直圍繞button旋轉(zhuǎn) 鼠標(biāo)停留時(shí)：button按鈕背景變?yōu)樗{(lán)色，其中文字變?yōu)楹谏瑫r(shí)產(chǎn)生陰影、倒影
根據(jù)效果圖可以得出實(shí)現(xiàn)的一些思路：
背景顏色的變化使用hover就可以實(shí)現(xiàn) 難點(diǎn)在于四周的線條 這里海轟的解決辦法是分為上下左右四條線，賦予每一條線一個(gè)動(dòng)畫(huà)，通過(guò)延時(shí)達(dá)到類似一條線的效果
這里使用的藍(lán)色：
藍(lán)色：#03e9f4
Part3Demo代碼
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%;
}
}
Part4原理解釋
這里還是主要講講四周線條的動(dòng)畫(huà)效果吧
四條線條的初始位置如下：
注：
這里將顏色改為紅色，線條寬度為20px，便于觀察 這里說(shuō)的初始位置是指動(dòng)畫(huà)開(kāi)始時(shí)的初始位置
以一條線條（第一條）的動(dòng)畫(huà)為例
其css設(shè)置為：絕對(duì)定位 position:absolute top=0 left=0
初始位置如圖：
第一條線條動(dòng)畫(huà)需要實(shí)現(xiàn)的效果
線條頭部從button最左端開(kāi)始移動(dòng) 平行向右移動(dòng) 最終停下位置為：線條尾部到達(dá)button最右端
最初位置：
最終位置：
根據(jù)上述思路，編寫(xiě)動(dòng)畫(huà)代碼
.btn span:nth-child(1){
top: 0;
left: 100%;
width: 100%;
height: 20px;
animation: animate1 1s linear infinite;
background: linear-gradient(90deg,transparent,red);
}
// 動(dòng)畫(huà)：從左到右
@keyframes animate1{
0%{
left: -100%;
}
50%,100%{
left: 100%;
}
效果如下：
我們的需求是：線條只需要在button區(qū)域進(jìn)行動(dòng)畫(huà)，其他區(qū)域用戶不可見(jiàn)
解決辦法也很簡(jiǎn)單：button中設(shè)置：overflow: hidden;
效果如下：
同理，再分別對(duì)其他三條邊進(jìn)行設(shè)置就可以了
第二條線效果：
第三條線效果：
第四條線條效果：
Part5疑點(diǎn)詳解
疑點(diǎn)1
估計(jì)細(xì)心的小伙伴會(huì)注意到
動(dòng)畫(huà)animate1延遲為0 動(dòng)畫(huà)animate2延遲為0.25s 動(dòng)畫(huà)animate3延遲為0.5s 動(dòng)畫(huà)animate4延遲為0.75s
為什么會(huì)這樣設(shè)置呢？
emmm 這里就說(shuō)說(shuō)海轟自己的理解吧
首先，我們將每一個(gè)動(dòng)畫(huà)的時(shí)間都位置為了 1s
為了達(dá)到連貫的效果，也就是：
線條1頭部到達(dá)button最右端時(shí)，線條2頭部恰好從button最上端向下開(kāi)始移動(dòng) 線條2頭部到達(dá)button最下端時(shí)，線條3頭部恰好從button最右端向左開(kāi)始移動(dòng) 線條3頭部到達(dá)button最左端時(shí)，線條4頭部恰好從button最下端開(kāi)始向上移動(dòng) 線條4頭部到達(dá)button最上端時(shí)，線條1頭部恰好從button最左端開(kāi)始向右移動(dòng) 依次循環(huán)
從上述的效果描述中，我們可以得知，從線條4頭部到達(dá)最上端時(shí)，線條1恰好又進(jìn)行第二次動(dòng)畫(huà)
也就是每次動(dòng)畫(huà)間隔了1s
每條線運(yùn)行的時(shí)間又相同，所以在button上移動(dòng)的時(shí)間也是相同的
均為 1s/4=0.25s
也就是說(shuō)：線條1頭部從button最左端到最右端，耗時(shí)0.25s
簡(jiǎn)單的理解：
每隔1s線條1就要出發(fā)一次
為了得到連貫效果，必須要求1s之內(nèi)，其他3條線都跑完button三條邊
而跑完每一條邊需要的時(shí)間又是一樣的（這個(gè)是通過(guò)ambition設(shè)置的）
從而得出
每一條邊需要 1s/4 = 0.25s
此時(shí)，線條2才開(kāi)始動(dòng)畫(huà)，也就需要延時(shí)0.25s
同理，線條3、4 的延時(shí)也就累計(jì)就可以了
疑點(diǎn)2
為什么動(dòng)畫(huà)設(shè)置是0%-50%呢
@keyframes animate1{
0%{
left: -100%;
}
50%,100%{
left: 100%;
}
}
從疑點(diǎn)1的解答中，我們可以發(fā)現(xiàn)，每條線在button邊運(yùn)行的時(shí)間只能為0.25s
線條從開(kāi)始到結(jié)束，需要耗時(shí) 1s（也就是從0%-100%）
/* 假設(shè)這樣設(shè)置 */
@keyframes animate1{
0%{
left: -100%;
}
100%{
left: 100%;
}
}
因?yàn)橐苿?dòng)速度為勻速（動(dòng)畫(huà)屬性設(shè)置了）
所以到50%需要耗時(shí)0.5s
也就是說(shuō)：線條1運(yùn)行在button上的時(shí)間為：0.5s
這與我們需要的0.25s就有區(qū)別
那么需要怎么辦呢？
哈哈，這里我們將動(dòng)畫(huà)屬性修改一下：
@keyframes animate1{
0%{
left: -100%;
}
50%,100%{
left: 100%;
}
}
啥意思呢？
簡(jiǎn)單理解就是只用了一半的時(shí)間（0.5s）就從開(kāi)始狀態(tài)運(yùn)行到了最終狀態(tài)（0%-100%）
那么從0%-50%就只需要0.25s了
注：這里海轟說(shuō)的估計(jì)不是很好理解，但是自己心里知道咋回事，不太會(huì)描述，不懂的小伙伴可以查查ambition的介紹
符合要求！
Part6結(jié)語(yǔ)
學(xué)習(xí)來(lái)源：
https://codepen.io/bhadupranjal/pen/vYLZYqQ
文章僅作為學(xué)習(xí)筆記，記錄從0到1的一個(gè)過(guò)程。希望對(duì)您有所幫助，如有錯(cuò)誤歡迎小伙伴指正～
我是海轟?(?ˊ?ˋ)?，如果您覺(jué)得寫(xiě)得可以的話，請(qǐng)點(diǎn)個(gè)贊吧
寫(xiě)作不易，「點(diǎn)贊」+「收藏」+「在看」
謝謝支持??
