css实现⽂字左右滚动效果
<div className={aryContainer}>
<div className={aryBlockFirst}>
注释：⾃2019年7⽉起，这是⼀段很长的⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本,                    本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本。
</div>
<div className={aryBlockSecond}>
注释：⾃2019年7⽉起，这是⼀段很长的⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本,                    本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本⽂本。
</div
</div>
.rotaryContainer{
background-color: yellow;
color: red;
height: 30px;
margin-top: 10px;
line-height: 30px;
overflow: hidden;
position: relative;
}
.rotaryBlockFirst {
animation: rotaryBlockFirst 20s linear infinite;
white-space: nowrap;
position: absolute;
width: 100%;
}
.rotaryBlockSecond {
animation: rotaryBlockSecond 20s linear infinite;
position: absolute;
white-space: nowrap;
width: 100%;
}
@keyframes rotaryBlockFirst {
0% { left: 0; }
100% { left: -110%;}
}
@keyframes rotaryBlockSecond {
0% { left: 110%; }
100% { left: 0; }
}
@media screen and (max-width: 1250px) {
@keyframes rotaryBlockFirst {
0% { left: 0; }
css特效文字
100% { left: -1200px;} /*1200px为⽂本的长度，利⽤多媒体查询，当屏幕宽度太⼩时，就设置滚动距离为⽂本的长度*/    }
@keyframes rotaryBlockSecond {
0% { left: 1200px; }
100% { left: 0; }
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。