到目前為止，我已經創建了一個按鈕，并在標簽按鈕內創建了另一個具有類背景的 div，以便在單擊按鈕時為影片效果提供相同的屬性。但我不確定在我的情況下，HTML 是否以這種方式將另一個 div 放入標記按鈕的常規語法？我正在分享我的代碼：
button {
height: 73px;
min-width: 198px;
border-radius: 5px;
background-color: $gold;
border-color: $gold;
position: relative;
overflow: hidden;
display: inline-block;
font-size: 1.313rem;
color: black;
z-index: 2;
line-height: 30.24px;
font-weight: bold;
text-transform: uppercase;
}
.background {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(#000000, #000000);
transition: .5s;
z-index: -1;
border-radius: 50%;
}
button:hover {
color: $gold;
}
button:hover .background {
width: 500%;
height: 500%;
} <button class='btn'>
<div class="background"></div>Contact
</button>但是當我單擊按鈕時，我們希望背景顏色顯示為圓形，而不是按鈕中心的日食。完全由 Figma在此處輸入鏈接描述
或代碼 pene：在此處輸入鏈接描述
uj5u.com熱心網友回復：
您的方法中的問題是您正在設定背景width和height1:1 的比例。這將為方形按鈕制作圓形。要創建圓形，您需要使其與按鈕的寬度和高度成比例。例如：
button {
height: 73px;
min-width: 198px;
border-radius: 5px;
background-color: $gold;
border-color: $gold;
position: relative;
overflow: hidden;
display: inline-block;
font-size: 1.313rem;
color: black;
z-index: 2;
line-height: 30.24px;
font-weight: bold;
text-transform: uppercase;
}
.background {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(#000000, #000000);
transition: .5s;
z-index: -1;
border-radius: 50%;
}
button:hover {
color: $gold;
}
button:hover .background {
width: 150%;
height: 460%;
}
<button class='btn'>
<span class="background"></span>Contact
</button>要獲得比例寬度，您可以在您的情況下使用 (198/73)* 高度。因此，如果您選擇高度為 130%，則寬度應為 353%。百分比越高，您的影片就越快??，因此請記住這一點。
uj5u.com熱心網友回復：
button:hover .background {
width: 120%;
height: 300%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414274.html
標籤：
上一篇：命令“mongo”在VSCode終端中有效但在iTerm2zsh終端中有效嗎？
下一篇：給出剩余父高度的影像填充底部