我正在嘗試在網站https://dashdigital.studio/上實作與“A digital design studio...”相同的入口影片，其中文字從無形的墻上升起。有人可以請我指出任何相關的檔案或影片本身的名稱嗎？我完全迷失了
我試圖在網上找到這樣的影片，但任何上升的影片都沒有顯示出同樣的“墻后效應”。
uj5u.com熱心網友回復：
這是一個片段。您需要一個蒙版，overflow: hidden以便文本可以來自其隱藏的下方。
編輯
我忘了提到我使用非中斷空格（ 或opt spacebar在 MacOS 上）而不是公共空格來分隔單詞，因為它會自動修剪尾隨空格。
h1 {
display: flex;
}
/* Mask with overflow hidden */
.word-mask {
overflow: hidden;
}
.word {
position: relative;
top: 2rem;
animation: move-up .4s ease-in forwards;
}
.word-2 {
animation-delay: .1s
}
.word-3 {
animation-delay: .2s
}
@keyframes move-up {
0% {
top: 2rem;
}
100% {
top: 0;
}
}<h1>
<div class="word-mask">
<div class="word word-1">Hope </div>
</div>
<div class="word-mask">
<div class="word word-2">it </div>
</div>
<div class="word-mask">
<div class="word word-3">helps! :)</div>
</div>
</h1>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530759.html
上一篇：Sass@use排序