实现文字背景色渐变从左往右移动功能

import styles from './index.module.css'
 
<div className={styles.Swiper}>
    <span className={styles.span}>这是一行背景色渐变从左往右移动的文字</span>
</div>复制

样式内容：

.Swiper{
  background-color: blue;
  display: inline-block;
  padding: 10px;
  font-weight: 600;
}
 
span{
 
    /* 文字透明 */
    color: transparent;  
    /* 背景      颜色     渐变     从左往右       透明          白色 透明      不重复背景*/          
    background: #2ecbee linear-gradient(to right,transparent,#fff,transparent) no-repeat;
    /* 将背景限制在文本形状内 */
    background-clip: text;
    /* 背景 大小      宽度  高度 */
    background-size: 20% 100%; 
    /* 背景位置  可以不写 因为就一行文字  */
    background-position: 0 0;
    
    /* 动画     执行名称  执行时间：3s  执行次数：无限次 */
    animation: shine 3s infinite;
}
 
@keyframes shine{
  from{
    /* 控制背景图片的位置 */
    background-position: -30% 0%;
  }
  /* 滑动到什么位置   x轴 130%  Y轴 0 */ 
  to{
    background-position: 130% 0;
  }
}复制

效果图：

使用到了样式隔离Css Module

说到这就顺便了解一下样式隔离 

我们在做项目过程中css一旦生效，就会应用于全局，所以很容易出现冲突。所以需要进行样式隔离。

而Css Module就是给选择器加上特殊的字符串，达到css隔离的效果。总的来说可以根据自己的情况可用可不用，效果达到了即可