將動畫文本轉換爲大寫

我希望將文本轉換轉換爲大寫：將鼠標懸停在鏈接上時。我試過了：將動畫文本轉換爲大寫

a{ 
    font-size:20px; 
animation-duration: 0.4s; 
    transition: all 0.4s ease-in-out; 
} 

a:hover{ 
text-transform:uppercase; 
}

但是，這沒有效果，它只是彈出大寫。有任何想法嗎？

2012-06-18 redleaf

動畫會是什麼樣子？你需要一些SVG庫或類似的東西來做到這一點：http://raphaeljs.com/helvetica.html – Blender

如果@ Blender的鏈接是你所期望的那種動畫，那麼用CSS就沒有辦法做到這一點。 –

我的猜測是沒有辦法對沒有中間值的樣式進行漸變過渡。例如，您可以將寬度從100px更改爲200px，因爲兩者之間有99箇中間值。但是，小寫字母和大寫字母之間的中間值是什麼（你可以隨時設置一個元素的值，例如寬度爲150px或170px）？

也許你可以通過將文本淡出（或半消半），將其改爲大寫，然後淡入文本（可能需要jQuery）來僞造過渡。

2012-06-18 02:04:48

我很肯定你對中間值是正確的。我也嘗試用4px的字體大小增加它，但它並不理想。好吧，回到文字陰影。 – redleaf

這裏有一個[** idea **]（http://motyar.blogspot.com/2010/09/text-morphing-effect-with-css.html） – arttronics

@arttronics：我想這將意味着使用文字陰影將小寫文本模糊化，將其改爲大寫，然後再將其模糊化。這是一個更好的主意，雖然ie9不支持文本陰影。 –

我不認爲有文字轉換的過渡。

2012-06-18 02:03:41 user1441816

回答