我試圖只將字母“h”向下移動 40 像素，但只有在移動整個單詞時翻譯才有效。我也嘗試將'h'放在相對于父級的絕對位置，但'ello'失去了它的原始位置。
HTML
<div class="container">
<span class="word">
<span class="character first" style="transition-delay: 0s;">h</span>
<span class="character" style="transition-delay: 0.025s;">e</span>
<span class="character" style="transition-delay: 0.05s;">l</span>
<span class="character" style="transition-delay: 0.075s;">l</span>
<span class="character" style="transition-delay: 0.1s;">o</span>
</span>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
width:100vw;
height:100vh;
}
span {
font-size:60px;
}
.word {
border-style: solid;
border-color: coral;
display: inline-block;
}
.first {
transform: translateY(40px);
}
uj5u.com熱心網友回復：
變換不適用于行內元素。
.first {
display:inline-block;
transform: translateY(40px);
}
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
uj5u.com熱心網友回復：
修改span元素的 CSS，如下所示：
span {
font-size:60px;
display: inline-block;
}
uj5u.com熱心網友回復：
Span 不能有 transform 屬性，要對其進行轉換，您應該在該元素中添加“display: block”或者只使用 div
.first {
transform: translateY(40px);
display: block;
}
或者
<div class="container">
<div class="word">
<div class="character first" style="transition-delay: 0s;">h</div>
<div class="character" style="transition-delay: 0.025s;">e</div>
<div class="character" style="transition-delay: 0.05s;">l</div>
<div class="character" style="transition-delay: 0.075s;">l</div>
<div class="character" style="transition-delay: 0.1s;">o</div>
</div>
</div>
uj5u.com熱心網友回復：
你沒有正確地呼叫這個類
#word-h {
transform: translateY(40px);
}<span id="word-h" class="character first" style="transition-delay: 0s;">h</span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/419787.html
標籤：