我正在使用此代碼從中心逐漸增加和減少我的標題。我認為可能有更多的CSS或JavaScript方法來解決這個問題。有人有想法嗎？.logo { font-family: 'arial'; color: blue; }<div class="logo"> <span style="font-size: 78px;">H</span><span style="font-size: 84px;">E</span> <span style="font-size: 88px;">L</span><span style="font-size: 90px;">L</span> <span style="font-size: 94px;">L</span><span style="font-size: 90px;">L</span> <span style="font-size: 88px;">O</span><span style="font-size: 84px;">O</span> <span style="font-size: 78px;">O</span></div>
2 回答
ibeautiful
TA貢獻1993條經驗 獲得超6個贊
除非您絕對需要，否則我不建議在這里使用 JS。即使您想為文本設置動畫，也可以使用css animations。
這是您可能想要實現的一個干凈的 CSS 示例。
.logo {
font-family: 'arial';
color: blue;
font-size: 80px;
}
.logo > span:nth-child(1) { font-size:70%; }
.logo > span:nth-child(2) { font-size:80%; }
.logo > span:nth-child(3) { font-size:90%; }
/* .logo > span:nth-child(4) { font-size:100%; } */
/* .logo > span:nth-child(5) { font-size:100%; } */
.logo > span:nth-child(6) { font-size:90%; }
.logo > span:nth-child(7) { font-size:80%; }
.logo > span:nth-child(8) { font-size:70%; }
<div class="logo">
<span>h</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span>o</span>
<span>o</span>
</div>
慕村9548890
TA貢獻1884條經驗 獲得超4個贊
SCSS 允許您使用“for”語句。這是 html 和 SCSS 的示例。請嘗試在 CodePen 寫作。（如果你不打算使用 SCSS，我很抱歉。）
.logo {
font-family: 'arial';
color: blue;
}
@for $i from 1 through 5 {
.font-#{$i} {
font-size: 78px + $i*4;
}
}
@for $i from 5 through 9 {
.font-#{$i} {
font-size: 98px - ($i - 5)*4;
}
}
<div class="logo">
<span
class="font-1">H</span><span
class="font-2">E</span><span
class="font-3">L</span><span
class="font-4">L</span><span
class="font-5">L</span><span
class="font-6">L</span><span
class="font-7">O</span><span
class="font-8">O</span><span
class="font-9">O</span>
</div>