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%); }
}