css文字循环滚动效果

css文字循环滚动效果

演示效果：

css文字循环滚动

HTML代码：

<!-- css文字循环滚动 -->
<div class="rollfontbg" aos="fade-up">
	<span>I’ll think of you every step of the way I’ll think of you every step of the way</span>
</div>

css样式：

/* css文字循环滚动 */
.rollfontbg{position: absolute;width: 100%;overflow: hidden;height: 160px;background-color: transparent;left: 0;top: 50%;z-index: 0;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;z-index: 1;margin-top: -80px;}
.rollfontbg span{font-size: 160px;color: #f1f2f3;font-weight: bold;letter-spacing: 40px;text-transform: uppercase;-webkit-animation: about-anim 20s linear infinite normal;animation: about-anim 20s linear infinite normal;display: block;white-space: nowrap;text-transform: uppercase;}
@-webkit-keyframes about-anim {
    0%   { -webkit-transform: translateX(-33.33%); }
    100% { -webkit-transform: translateX(-66.66%); }
}
@keyframes about-anim {
    0%   { transform: translateX(-33.33%); }
    100% { transform: translateX(-66.66%); }
}