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

【问题标题】：Sentence with scrolling text and overlapping div带有滚动文本和重叠 div 的句子
【发布时间】：2020-10-16 15:15:53
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

感谢您的回复，不幸的是，它似乎仍然不太正确。见这里：jsfiddle.net/vrxns2yq
你需要这样吗？ “第一是最好的”