css文字上下滑动 |rotate css

/* CSS代码实现 */
.scroll-text{
height: 50px;
line-height: 50px;
overflow: hidden;
margin: 0 auto;
white-space: nowrap;
animation: scroll 5s linear infinite;
}
@keyframes scroll{
from{
transform: translateY(0);
}
to{
transform: translateY(-100%);
}
}

以上代码便是实现文字上下滑动的最基本样式。使用关键字“overflow”和“line-height”来决定内容展示的高度，从而实现滚动效果。其中属性“white-space:nowrap”用来禁止文字自动换行。

再通过CSS3新特性“animation”，可以实现滚动效果的动画化。使用“from”和“to”定义动画的起点和终点，通过“translateY()”方法来控制垂直方向的位移，从而实现上下滚动的效果。而“linear”决定滚动速度平稳，时间长度可自定义。

在实际应用中，还可以结合JavaScript来实现更加灵活的文字滚动效果，如实现滚动停止、鼠标悬停等交互效果，从而更好地提升用户体验。