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隔离的效果。总的来说可以根据自己的情况可用可不用,效果达到了即可