带有滚动文本和重叠 div 的句子

Question

我正在尝试使用 html 和 css 在句子中间制作滚动文本。 如何使句子的后半部分响应滚动文本？ 我敢肯定，响应式甚至不是正确的短语，但希望你能明白我的意思……很好，我正在学习！ :)

我真的认为这应该是关于该问题的足够详细信息，但我正在努力满足最低字数要求。

谢谢

 /*Sentence*/ .sentence{ color: #ff8800; font-size: 30px; text-align: left; display: inline; } /*Wrapper*/ .wrapper{ font-family: 'Raleway', sans-serif; margin: 100px auto; padding: 40px 40px; position: relative; width: 100%; } /*Vertical Sliding*/ .slidingVertical{ display: inline; text-indent: 8px; } .slidingVertical span{ animation: topToBottom 12.5s linear infinite 0s; -ms-animation: topToBottom 12.5s linear infinite 0s; -webkit-animation: topToBottom 12.5s linear infinite 0s; color: #ff8800; opacity: 0; overflow: hidden; position: absolute; } .slidingVertical span:nth-child(2){ animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .slidingVertical span:nth-child(3){ animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .slidingVertical span:nth-child(4){ animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } /*topToBottom Animation*/ @-moz-keyframes topToBottom{ 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: translateY(-50px); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(50px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes topToBottom{ 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: translateY(-50px); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(50px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes topToBottom{ 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: translateY(-50px); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(50px); } 80% { opacity: 0; } 100% { opacity: 0; } }

 <html> <section class="wrapper"> <h2 class="sentence">number <div class="slidingVertical"> <span>one</span> <span>two</span> <span>three</span> <span>four</span> </div> </h2> <h2 class="sentence">is the best</h2> </section> </html>

Answer 1

我们需要为.sentence和.slidingVertical添加display: inline-block 。

对于display: inline ， margin和padding被忽略。

.sentence {
    color: #ff8800;
    font-size: 30px;
    text-align: left;
    display: inline-block;
}

.slidingVertical {
    display: inline-block;
}