Html 带有固定文本的CSS文本旋转木马

我正在尝试重新创建在上发现的效果

我在网上搜索了一下，发现了一些东西，并试图调整它。但我不知道如何将文本与示例中的文本对齐。 我试图修改这个例子，但如果有更好的实践，你可以告诉我，这是更好的。 一些有助于查找有关它的文档的人将成为学徒

html，
身体{
字体系列：“Droid衬线”，衬线；
}
.滑块{
高度：320px；
宽度：680px；
左边距：50像素；
溢出：可见；
职位：0%；
}
.面具{
溢出：隐藏；
高度：320px；
}
.ul{
保证金：0；
填充：0；
位置：相对位置；
}
李先生{
宽度：680px；
高度：320px；
位置：绝对位置；
顶部：-325px；
列表样式：无；
}
.slider.quote{
字体大小：40px；
字体：斜体；
}
.li.1{
-moz动画：循环15s线性无限；
-webkit动画：循环15s线性无限；
动画：循环15秒线性无限；
}
.2{
-moz动画：循环15s线性无限；
-webkit动画：循环15s线性无限；
动画：循环15s线性无限；
}
.li.3{
-moz动画：循环3 15秒线性无限；
-webkit动画：循环3 15秒线性无限；
动画：循环3 15秒线性无限；
}
.li.4{
-moz动画：循环4 15秒线性无限；
-webkit动画：循环4 15秒线性无限；
动画：循环4 15秒线性无限；
}
.5{
-moz动画：循环15秒线性无限；
-webkit动画：循环15秒线性无限；
动画：循环15秒线性无限；
}
.滑块：鼠标悬停{
-moz动画播放状态：暂停；
-webkit动画播放状态：暂停；
动画播放状态：暂停；
}
@-moz关键帧循环{
0% {
顶部：0px；
}
4% {
顶部：0px；
}
16% {
顶部：0px；
不透明度：1；
z指数：0；
}
20% {
顶部：325px；
不透明度：0；
z指数：0；
}
21% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
92% {
顶部：-325px；
不透明度：0；
z指数：0；
}
96% {
顶部：-325px；
不透明度：0；
}
100% {
顶部：0px；
不透明度：1；
}
}
@-moz关键帧循环2{
0% {
顶部：-325px；
不透明度：0；
}
16% {
顶部：-325px；
不透明度：0；
}
20% {
顶部：0px；
不透明度：1；
}
24% {
顶部：0px；
不透明度：1；
}
36% {
顶部：0px；
不透明度：1；
z指数：0；
}
40% {
顶部：325px；
不透明度：0；
z指数：0；
}
41% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
100% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
}
@-moz关键帧循环3{
0% {
顶部：-325px；
不透明度：0；
}
36% {
顶部：-325px；
不透明度：0；
}
40% {
顶部：0px；
不透明度：1；
}
44% {
顶部：0px；
不透明度：1；
}
56% {
顶部：0px；
不透明度：1；
}
60% {
顶部：325px；
不透明度：0；
z指数：0；
}
61% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
100% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
}
@-moz关键帧循环4{
0% {
顶部：-325px；
不透明度：0；
}
56% {
顶部：-325px；
不透明度：0；
}
60% {
顶部：0px；
不透明度：1；
}
64% {
顶部：0px；
不透明度：1；
}
76% {
顶部：0px；
不透明度：1；
z指数：0；
}
80% {
顶部：325px；
不透明度：0；
z指数：0；
}
81% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
100% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
}
@-moz关键帧循环5{
0% {
顶部：-325px；
不透明度：0；
}
76% {
顶部：-325px；
不透明度：0；
}
80% {
顶部：0px；
不透明度：1；
}
84% {
顶部：0px；
不透明度：1；
}
96% {
顶部：0px；
不透明度：1；
z指数：0；
}
100% {
顶部：325px；
不透明度：0；
z指数：0；
}
}
@-webkit关键帧循环{
0% {
顶部：0px；
}
4% {
顶部：0px；
}
16% {
顶部：0px；
不透明度：1；
z指数：0；
}
20% {
顶部：325px；
不透明度：0；
z指数：0；
}
21% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
50% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
92% {
顶部：-325px；
不透明度：0；
z指数：0；
}
96% {
顶部：-325px；
不透明度：0；
}
100% {
顶部：0px；
不透明度：1；
}
}
@-webkit关键帧循环2{
0% {
顶部：-325px；
不透明度：0；
}
16% {
顶部：-325px；
不透明度：0；
}
20% {
顶部：0px；
不透明度：1；
}
24% {
顶部：0px；
不透明度：1；
}
36% {
顶部：0px；
不透明度：1；
z指数：0；
}
40% {
顶部：325px；
不透明度：0；
z指数：0；
}
41% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
100% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
}
@-webkit关键帧循环3{
0% {
顶部：-325px；
不透明度：0；
}
36% {
顶部：-325px；
不透明度：0；
}
40% {
顶部：0px；
不透明度：1；
}
44% {
顶部：0px；
不透明度：1；
}
56% {
顶部：0px；
不透明度：1；
z指数：0；
}
60% {
顶部：325px；
不透明度：0；
z指数：0；
}
61% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
100% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
}
@-webkit关键帧循环4{
0% {
顶部：-325px；
不透明度：0；
}
56% {
顶部：-325px；
不透明度：0；
}
60% {
顶部：0px；
不透明度：1；
}
64% {
顶部：0px；
不透明度：1；
}
76% {
顶部：0px；
不透明度：1；
z指数：0；
}
80% {
顶部：325px；
不透明度：0；
z指数：0；
}
81% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
100% {
顶部：-325px；
不透明度：0；
z指数：-1；
}
}
@-webkit关键帧循环5{
0% {
顶部：-325px；
不透明度：0；
}
76% {
顶部：-325px；
不透明度：0；
}
80% {
顶部：0px；
不透明度：1；
}
84% {
顶部：0px；
不透明度：1；
}
96% {
顶部：0px；
不透明度：1；
z指数：0；
}
100% {
顶部：325px；
不透明度：0；
z指数：0；
}
}

inf