懸停在字體大小和背景大小

我想實現一個不錯的Hover Off effect使用CSS。有一個很好的例子here，但我不能用屬性background-size和font-size重現此。懸停在字體大小和背景大小

效果很簡單，只需將鼠標懸停在圖像和文本上，然後以乾淨的方式（使用-webkit-transition）將鼠標懸停在原始狀態。此代碼失敗：

.nice a { 
    background: url(../my_image.png) no-repeat; 
    background-size: 40px 37px; 
    font-size: 12px; 

    /* HOVER OFF */ 
    -webkit-transition: background-size 2s; 
    -webkit-transition: font-size 2s; 
} 

.nice a:hover{ 
    background: url(../my_image.png) no-repeat ; 
    background-size: 43px 39px; 
    font-size: 13px; 

    /* HOVER ON */ 
    -webkit-transition: background-size 2s; 
    -webkit-transition: font-size 2s; 
}

任何想法？

來源

2012-09-21 Mick

你可以創建一個小提琴嗎？ – Liam

我覺得問題，根據您提供的代碼，有沒有AREN」足夠的'步驟'或'關鍵幀'讓動畫順利運行。

查看本演示：http://dabblet.com/gist/3763579。使用你的屬性[右邊一個]的方框在時鐘上有2秒鐘來動畫顯示一個或兩個像素，因此在文物跳到之前會出現明顯延遲到下一個像素。同樣的動畫回到地方，因此波濤洶涌，不平順的過渡。

來源

2012-09-21 20:14:11 carpenumidium

我的壞，這個工程：

/* HOVER OFF */ 
-webkit-transition-property: background-size, font-size; 
o-transition-property: background-size, font-size; 
-moz-transition-property: background-size, font-size; 
transition-property: background-size, font-size; 

-webkit-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
transition-duration: 0.5s;

來源

2012-09-21 16:21:59 Mick

您可以使用transform:scale(value);

Test it

.nice a { 
    font-size: 12px; 
    display:block; 
    -webkit-transition:all 2s ease; 
    -webkit-transform-origin:top left; 
} 

.nice a:hover { 
    -webkit-transform:scale(1.3); 
}

來源

2012-09-21 16:22:07 Giona

這裏工作Demo

和教程，以瞭解更多關於background

這是另一種方式與變換做到這一點。

.nice a { -webkit-transition: font-size .2s ease-in-out; } 
.nice a:hover { -webkit-transform: scale(1.1); }

關鍵幀的例子（缺點是不是所有的時間盤旋，它不會停留）。

@-webkit-keyframes scalar{ 
    from{ 
     background-size: 40px 37px; 
    font-size: 22px; 
} 
to{ 
    background-size: 103px 79px; 
    font-size: 32px; 
} 
} 

.nice2 a{ 
    background: skyblue; 
    background-image:url("http://lorempixel.com/300/200/abstract"); 
    background-repeat:no-repeat; 
    background-size: 40px 37px; 
    font-size: 22px; 
    color:white; 
} 
.nice2 a:hover{ 
    -webkit-animation: scalar 1s; 
}

與keyframes

upadated演示中，我們已經看到了三種方法來做到這一點。讓我們決定哪個最適合它。

轉變它給出了光滑漂亮的外觀。
轉換在增長內容時模糊。
關鍵幀導致高端產品。但...

選擇是你的！

來源

2012-09-22 09:24:12

懸停在字體大小和背景大小

回答

相關問題