Может ли CSS3 переход размер шрифта?



как можно увеличить размер шрифта при наведении мыши? Цветовые переходы прекрасно работают с течением времени, но размер шрифта переключается сразу по какой-то причине.

пример кода:

body p {
     font-size: 12px;
     color: #0F9;
     transition:font-size 12s;
     -moz-transition:font-size 12s; /* Firefox 4 */
     -webkit-transition:font-size 12s; /* Safari and Chrome */
     -o-transition:font-size 12s;
     transition:color 12s;
     -moz-transition:color 12s; /* Firefox 4 */
     -webkit-transition:color 12s; /* Safari and Chrome */
     -o-transition:color 12s;
}

 p:hover {
      font-size: 40px;
      color:#FC0;
 }
186   4  

4 ответов:

переходы цвета отлично с течением времени, но шрифт переключается сразу же по некоторым черт побери поводу.

код font-size переход перезаписывается вашим color переход.

transition: font-size 12s; /* transition is set to 'font-size 12s' */
transition: color 12s;     /* transition is set to 'color 12s' !! */

вместо этого вы должны объединить их все в одно объявление:

transition: color 12s, font-size 12s;

посмотреть:http://jsfiddle.net/thirtydot/6HCRs/

-webkit-transition: color 12s, font-size 12s;
   -moz-transition: color 12s, font-size 12s;
     -o-transition: color 12s, font-size 12s;
        transition: color 12s, font-size 12s;

(или, просто использовать all ключевые слова: transition: all 12s; - http://jsfiddle.net/thirtydot/6HCRs/1/).

попробуйте установить переход для всех свойств:

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;

это тоже работает.

или просто шрифт:transition: font 0.3s ease.

переходы для font-size кажется, шаг за пикселем и, следовательно, не гладко.

Если это только одна строка, вы можете использовать transform: scale(.8). Шкалы вниз, а не вверх, чтобы не потерять качество. Вы, вероятно, также должны использовать transform-origin: 0 0 или другое значение в зависимости от выравнивания текста.

JS Fiddle Demo

альтернативой было бы то, что вы также можете использовать фреймворк, такой как jQuery Transit сделать это легко для вас:

Javascript:

$("p").hover( function () {
    //On hover in
    $("p").transition({ 'color': '#FC0', 'font-size': '40px' }, 1000);    
}, function () {
    //On hover out
    $("p").transition({ 'color': '#0F9', 'font-size': '12px' }, 1000);
});

CSS:

p 
{

font-size: 12px;
color: #0F9;

}
    Ничего не найдено.

Добавить ответ:
Отменить.