我有以下jsfiddle。
使用以下代码:
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;
}
}
如何更改文字的大小,而不是框的大小?
答案 0 :(得分:1)
给它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;
}
}
&#13;
<div class="animated-box">Animated box</div>
&#13;
答案 1 :(得分:1)