css文字自动向上移动 |css rem 使用方法

/* 首先定义一段规则，将要滚动的文字容器设置为固定高度和宽度，同时设置为溢出隐藏 */
.text-container {
width: 300px;
height: 100px;
overflow: hidden;
}
/* 接着定义要滚动的文字，设置为相对布局，并设置top值为0 */
.text-scroll {
position: relative;
top: 0;
}
/* 最后定义一个动画效果，使文字向上移动，触发时让top值减去文字容器的高度 */
.text-scroll {
animation: scroll-up 5s infinite;
}
@keyframes scroll-up {
0% {
top: 0;
}
100% {
top: -100px;
}
}

以上就是实现文字自动向上滚动的CSS代码，大家首先定义了一个文字容器，并将overflow属性设置为hidden，这样文字就会被隐藏。然后定义要滚动的文字样式，设置为相对布局，并且top值设置为0。接着大家定义了一个动画效果，通过使用keyframes关键字和animation属性，让文字容器的top值不断减小，从而达到向上滚动的效果。

如果要增加滚动速度，可以调整scroll-up动画的时长，将5s改为更小的值即可。

最后，大家通过给文字容器添加text-container样式，将文字自动向上滚动的效果应用到该容器中。