网页css样式滚动字幕

一、代码

.verticalText{
    position: absolute;
    z-index:10;
    top: 0; left: 0;bottom:0;right:0;
   background: -webkit-linear-gradient(top,#f6f8fa 10%, rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,#f6f8fa 95%); Safari 5.1 - 6.0
  background: -o-linear-gradient(top,#f6f8fa 10%, rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,#f6f8fa 95%); Opera 11.1 - 12.0
  background: -moz-linear-gradient(top,#f6f8fa 10%, rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,#f6f8fa 95%); Firefox 3.6 - 15
  background: linear-gradient(top, #f6f8fa 10%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,#f6f8fa 95%); 标准的语法
}
 
 .wordAni {
    font-size: 14px;
    display: inline-block;
     animation: wordsLoop 30s linear infinite;
} 



<div class="pt90 pb230 container">
			<ul class="row about">
				<li
					class="d-flex jusitify-content-center align-items-center col-lg-4 col-12 overhidden">
					<div class="w100 h100 introduce">
						<div class="w100 h100 borderBox">
							<div class="introduceText">
							</div>
							<div class="text overhidden textBox">
								<div class="verticalText"></div>
								<div class="wordAni" id="compan1">
								</div>
							</div>
						</div>

					</div>
				</li>