我找到了一個 CSS 影片，用于從這個代碼筆中劃過一個單詞：code
效果很好！但是，當我嘗試將字體大小增加到 70 時，單詞開始重疊。我玩過它，但不能讓它很好地作業。如何讓這段代碼使用更大的字體？這就是我現在所擁有的：
.wordCarousel {
font-size: 36px;
font-weight: 100;
color: #eee;
div {
overflow: hidden;
position: relative;
float: right;
height: 65px;
padding-top: 10px;
margin-top: -10px;
li {
font-family: Serif;
color: #eee;
font-weight: 700;
padding: 0 10px;
height: 45px;
margin-bottom: 45px;
display: block;
}
}
}
@keyframes flip4 {
0% {
margin-top: -360px;
}
5% {
margin-top: -270px;
}
25% {
margin-top: -270px;
}
30% {
margin-top: -180px;
}
50% {
margin-top: -180px;
}
55% {
margin-top: -90px;
}
75% {
margin-top: -90px;
}
80% {
margin-top: 0px;
}
99.99% {
margin-top: 0px;
}
100% {
margin-top: -270px;
}
}
html與此類似：
<h4 class="wordCarousel">
<span>Word swipe animation: </span>
<div>
<!-- Use classes 2,3, or 4 to match the number of words -->
<ul class="flip4">
<li>Oh My!</li>
<li>Swoosh</li>
<li>Cool</li>
<li>Squirrel??</li>
</ul>
</div>
</h4>
uj5u.com熱心網友回復：
它實際上在我的螢屏上運行良好。但是 170px 使這些詞與我的重疊。我敢打賭，這個問題取決于螢屏尺寸。有些螢屏在 70 px 的字體下效果很好，有些則不行。
您可以嘗試使用相對長度單位而不是 px。在此處查看更多資訊： https ://www.w3schools.com/cssref/css_units.asp
您可能會查看vw。轉到此處，抓住將代碼與結果分開的中間欄并前后移動以查看 vw 對“Hello”字體的影響： https ://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw
uj5u.com熱心網友回復：
好吧，你的 CSS 影片中的像素值都是 90 像素步長（-360 像素、-270、-180、-90、0）。因此，只需在其中使用更大的步長，例如 120px：
@keyframes flip4 {
0% {
margin-top: -480px;
}
5% {
margin-top: -360px;
}
25% {
margin-top: -360px;
}
30% {
margin-top: -240px;
}
50% {
margin-top: -240px;
}
55% {
margin-top: -120px;
}
75% {
margin-top: -120px;
}
80% {
margin-top: 0px;
}
99.99% {
margin-top: 0px;
}
100% {
margin-top: -480px;
}
}
如果這還不夠，請嘗試 150 像素步長（-600、-450、-300、-150、0、-600），或者嘗試找出最適合您情況的步長值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/422194.html
標籤：
上一篇：如何通過懸停<a>來禁用游標縮放
下一篇：在小視口中出現在彼此前面的引導行