我试图使滚动文本在一个句子的中间与html和CSS。如何使句子的后半部分响应滚动文本？我敢肯定“响应”甚至不是正确的短语，但希望你会明白我的意思。。。好点，我正在学习！:）
我真的认为这应该是足够详细的问题，但我试图满足最小的字数。
谢谢
null
/*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>null
我们需要为.句子和.SlidingVertical添加display:inline-block。
对于显示:内联，忽略边距和填充。
.sentence {
color: #ff8800;
font-size: 30px;
text-align: left;
display: inline-block;
}
.slidingVertical {
display: inline-block;
}
