框內的動畫文字

用下面的代碼：

HTML：

<div class="animated-box">Animated box</div>

CSS：

.animated-box { 
    border:2px solid #bada55; 
    border-radius: 10px 0; 

    color: #bada55; 
    font-size: 20px; 
    font-weight:bold; 
    text-align:center; 

    padding:50px; 
    width:200px; 

    -webkit-animation:fontbulger 1s infinite; 
    -moz-animation: fontbulger 5s infinite; 
    -o-animation:  fontbulger 1s infinite; 
    animation:  fontbulger 1s infinite; 
} 

@-webkit-keyframes fontbulger { 
    0%, 100% { 
    font-size: 15px; 
    } 
    50% { 
    font-size: 20px; 
    } 
} 
@-moz-keyframes fontbulger { 
    0%, 100% { 
    font-size: 15px; 
    } 
    50% { 
    font-size: 20px; 
    } 
} 
@-o-keyframes fontbulger { 
    0%, 100% { 
    font-size: 15px; 
    } 
    50% { 
    font-size: 20px; 
    } 
} 
@keyframes fontbulger { 
    0%, 100% { 
    font-size: 15px; 
    } 
    50% { 
    font-size: 20px; 
    } 
}

如何我可以改變文字的大小，而不是框的大小？

來源

2014-11-21 Florin Pop

給它一個固定高度 – Rhumborl 2014-11-21 09:34:14

指定line-height，例如

line-height:20px;

http://jsfiddle.net/uexwLy75/2/

來源

2014-11-21 09:36:48 MLeFevre

缺省情況下，「行高」值是什麼？汽車？ – 2014-11-21 09:41:15

@FlorinPop默認爲'line-height：normal'。這個翻譯的內容是瀏覽器的具體情況，取決於所選的字體系列，[例如Firefox]（https://developer.mozilla.org/en-US/docs/Web/CSS/line-height）「大致爲1.2」 – MLeFevre 2014-11-21 11:16:13

給它一個height: 30px;

.animated-box { 
 
    border:2px solid #bada55; 
 
    border-radius: 10px 0; 
 
    
 
    color: #bada55; 
 
    font-size: 20px; 
 
    font-weight:bold; 
 
    text-align:center; 
 
    
 
    padding:50px; 
 
    width:200px; 
 
    height: 30px; 
 
    -webkit-animation:fontbulger 1s infinite; 
 
    -moz-animation: fontbulger 5s infinite; 
 
    -o-animation:  fontbulger 1s infinite; 
 
    animation:  fontbulger 1s infinite; 
 
} 
 

 
@-webkit-keyframes fontbulger { 
 
    0%, 100% { 
 
    font-size: 15px; 
 
    } 
 
    50% { 
 
    font-size: 20px; 
 
    } 
 
} 
 
@-moz-keyframes fontbulger { 
 
    0%, 100% { 
 
    font-size: 15px; 
 
    } 
 
    50% { 
 
    font-size: 20px; 
 
    } 
 
} 
 
@-o-keyframes fontbulger { 
 
    0%, 100% { 
 
    font-size: 15px; 
 
    } 
 
    50% { 
 
    font-size: 20px; 
 
    } 
 
} 
 
@keyframes fontbulger { 
 
    0%, 100% { 
 
    font-size: 15px; 
 
    } 
 
    50% { 
 
    font-size: 20px; 
 
    } 
 
}

<div class="animated-box">Animated box</div>

來源

2014-11-21 09:35:00

或行高 – laurent 2014-11-21 09:36:32

框內的動畫文字

回答

相關問題