CSS字體大小縮放抖動

我想縮放字體大小以在懸停時創建魚眼鏡頭效果。CSS字體大小縮放抖動

使用CSS在轉換時增加字體大小會導致抖動效果。

使用變換比例會產生不希望的效果，其中在放大之前文本的左側稍稍向左移動。

我創建了一支筆來並排說明2種效果。理想情況下，我想用權

任何想法實現這一目標的平滑左邊的效果呢？

乾杯

HTML

<ul class="fish-eye-text-size"> 
    <li>Font size scaling</li> 
    <li>Menu item one</li> 
    <li>Menu item two</li> 
    <li>Menu item three</li> 
    <li>Menu item four</li> 
    <li>Menu item five</li> 
    <li>Menu item six</li> 
    <li>Menu item seven</li> 
    <li>Menu item eight</li> 
    <li>Menu item nine</li> 
    <li>Menu item ten</li> 
    </ul> 

    <ul class="fish-eye-scaling"> 
    <li>CSS scaling</li> 
    <li>Menu item one</li> 
    <li>Menu item two</li> 
    <li>Menu item three</li> 
    <li>Menu item four</li> 
    <li>Menu item five</li> 
    <li>Menu item six</li> 
    <li>Menu item seven</li> 
    <li>Menu item eight</li> 
    <li>Menu item nine</li> 
    <li>Menu item ten</li> 
    </ul>

SCSS

//Text size 
.mediumText { 
    font-size:1.4rem; 
} 
.largeText { 
    font-size:1.7rem; 
} 



// CSS Scaling 
.mediumScale { 
    transform: scale(1.3); 
    transform-origin: 0% 50%; 
} 
.largeScale { 
    transform: scale(1.5); 
    transform-origin: 0% 50%; 
} 




ul { 
    margin:0 auto; 
    padding:0; 
    list-style:none; 
    width:250px; 
    overflow:hidden; 
    float:left; 
    margin:20px; 
    background:#e1e1e1; 

    li { 
    cursor: pointer; 
    transition:all 0.4s; 
    height:30px; 
    position:relative; 
    padding:10px; 
    will-change: transform; 
    } 

}

// Font size 
$(".fish-eye-text-size li").on("mouseenter", function() { 
    $(this).addClass("largeText"); 
    $(this).next().addClass("mediumText"); 
    $(this).prev().addClass("mediumText"); 
}); 

$(".fish-eye-text-size li").on("mouseleave", function() { 
    $(this).removeClass("largeText"); 
    $(this).next().removeClass("mediumText"); 
    $(this).prev().removeClass("mediumText"); 
}); 

// CSS Scaling 
$(".fish-eye-scaling li").on("mouseenter", function() { 
    $(this).addClass("largeScale"); 
    $(this).next().addClass("mediumScale"); 
    $(this).prev().addClass("mediumScale"); 
}); 

$(".fish-eye-scaling li").on("mouseleave", function() { 
    $(this).removeClass("largeScale"); 
    $(this).next().removeClass("mediumScale"); 
    $(this).prev().removeClass("mediumScale"); 
});

來源

2017-07-26 sygad1

在你的第二個例子，轉換原點隱含懸停改變從默認50% 50%到0% 50%，因此抖動。您應該設置transform-origin: 10px 50%;（10px而不是0，因爲我們旨在確定第一個字母的位置，而不是填充外邊緣，因此我們將變換原點設置爲填充區域的內邊緣）to the default state of li並將其從.mediumScale/.largeScale類中刪除。

來源

2017-07-26 09:13:08

CSS字體大小縮放抖動

回答

相關問題