首页 前端知识 实现文字背景色渐变从左往右移动功能

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

2024-09-21 21:09:33 前端知识 前端哥 152 930 我要收藏
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隔离的效果。总的来说可以根据自己的情况可用可不用,效果达到了即可

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18492.html
标签
评论
发布的文章

Excel-to-JSON开源项目指南

2024-10-27 22:10:41

json字符串, string转json

2024-10-27 22:10:16

【开源】APIJSON 框架

2024-10-27 22:10:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!