css实现文字左右滚动效果

​​​​​​​

lizuncong (lizuncong) · GitHubI am a strong believer in reverse engineering. lizuncong has 42 repositories available. Follow their code on GitHub.https://github.com/lizuncong 

<div className={styles.rotaryContainer}>
  <div className={styles.rotaryBlockFirst}>
    注释：自2019年7月起，这是一段很长的文本文本文本文本文本文本文本文本文本文本文本文本文本文本,                    
    本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
  </div>
  <div className={styles.rotaryBlockSecond}>
    注释：自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; }
        100% { left: -1200px;} /*1200px为文本的长度，利用多媒体查询，当屏幕宽度太小时，就设置滚动距离为文本的长度*/
    }

    @keyframes rotaryBlockSecond {
        0% { left: 1200px; }
        100% { left: 0; }
    }
}