我正在尝试用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>我们需要为.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;
}