有时候需要在大屏上实现文字滚动展示的效果,今天做了个尝试,记录一下
<div class="scrolling-text">
<p>奋斗者奥利给,嘎嘎一嘎斯</p>
</div>
css如下
.scrolling-text p {
display: inline-block;
font-size: 24px;
color: red;
animation: scrollText 10s linear infinite;
}
@keyframes scrollText {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
效果如图