CSS轉換字體大小：避免抖動/擺動

我做了如下瓦，具有懸停效果與CSS- transition增加font-size：CSS轉換字體大小：避免抖動/擺動

body { 
 
    font-family: 'Segoe UI', sans-serif; 
 
} 
 
.website { 
 
    width: 180px; 
 
    height: 73px; 
 
    text-align: center; 
 
    line-height: 80px; 
 
    margin: 1px; 
 
    color: white; 
 
    border-bottom: 5px solid darkslateblue; 
 
    background-color: darkslateblue; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    transition: border-color 0.66s ease-out, font-size 0.3s ease-out; 
 
} 
 
.website:hover { 
 
    font-size: 16pt; 
 
    cursor: pointer; 
 
    transition: border-color 0s; 
 
    border-color: black; 
 
}

<div class="website">Blog 1</div> 
 
<div class="website">Blog 2</div> 
 
<div class="website">Blog 3</div>

當你將鼠標懸停他們可以看到font-size的轉換並不順利。換句話說，它在改變尺寸時會上下襬動。
有沒有人有想法如何解決或解決它？

來源

2016-01-11 CoderPi

擺動是因爲字體大小縮放在整個點，所以大小動畫不像你想要的那樣平滑。 – GolezTrol

您可以使用CSS transform:scale，而不是像這樣的平穩過渡：

.website:hover { 
    cursor: pointer; 
    transition: border-color 0.4s; 
    border-color: black; 
} 
.website div { 
    transition: transform 0.3s ease-out; 
} 
.website:hover div { 
    transform: scale(1.5); 
    transition: transform 0s; 
}

Here is the JSFiddle demo

另外請注意，我添加了一個div和內文縮放是在div上完成的，因此整個框不縮放:)

來源

2016-01-11 09:17:15

這是一個（）解決方案。不過請注意，在變焦時，'transform：scale'往往會產生模糊/像素結果。您可能會考慮嘗試使用更大的字體，該字體默認縮小並在懸停時縮放至正常大小。 – GolezTrol

我剛剛有同樣的想法，它工作得很好（我也不想添加額外的元素），並且瀏覽器似乎在沒有動畫時擺脫了模糊。但是我無法讓它工作，所以它在我懸停時彈出最大尺寸，並在離開Element時放大。 – CoderPi

我現在工作了，非常感謝https://jsfiddle.net/hrzjebhn/ – CoderPi

懸停把transition: border-color 0s, font-size 0.3s ease-out;

因爲懸停transition: border-color 0s會給只border-color過渡不給font-size。

body { 
 
    font-family: 'Segoe UI', sans-serif; 
 
} 
 
.website { 
 
    width: 180px; 
 
    height: 73px; 
 
    text-align: center; 
 
    line-height: 80px; 
 
    margin: 1px; 
 
    color: white; 
 
    border-bottom: 5px solid darkslateblue; 
 
    background-color: darkslateblue; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    transition: border-color 0.66s ease-out, font-size 0.3s ease-out; 
 
} 
 
.website:hover { 
 
    font-size: 16pt; 
 
    cursor: pointer; 
 
    transition: border-color 0s, font-size 0.3s ease-out; 
 
    border-color: black; 
 
}

<div class="website">Blog 1</div> 
 
<div class="website">Blog 2</div> 
 
<div class="website">Blog 3</div>

來源

2016-01-11 09:06:26 ketan

對不起，這不是問題。我打算在進入懸停時彈出它。問題在於文本在更改大小時會上下晃動 – CoderPi

CSS轉換字體大小：避免抖動/擺動

回答

相關問題